CATALOGUE Code & Data Formation No Code Webflow - Créer la landing Page d'OpenAI

Recréer une Barre de Navigation avec Webflow

Retour à la formation
Chapitre 6 Leçon 3
Précédent
Suivant

Découvrez comment recréer la barre de navigation d'OpenAI en utilisant Webflow. Apprenez les bases des components et des structures sous l'approche Plan First.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à recréer la barre de navigation de OpenAI en utilisant Webflow. Nous commencerons par comprendre les bases de la structuration sous l'approche Plan First, en configurant un Page Wrapper pour isoler le style de chaque page. Ensuite, nous explorerons le Global Style pour assurer une cohérence visuelle sur tout le site. Nous aborderons la création de components, qui permettent d'appliquer des modifications globales sur plusieurs pages. La navigation sera construite en utilisant les éléments par défaut de Webflow, tout en ajoutant des styles personnalisés pour garantir un design responsif et user-friendly. Cette leçon détaillera chaque étape de la configuration de la navigation, y compris l'ajout de logos, de menus et de boutons, ainsi que la gestion des drop-downs et des icônes.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de: Recréer la barre de navigation d'OpenAI, Comprendre la structure Plan First, Utiliser des components et des Global Styles, et Assurer un design responsive.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir une connaissance de base en HTML, CSS et Webflow.

Métiers concernés

Les professions utilisant ces compétences incluent designer web, développeur front-end, concepteur UX/UI, et architecte de l'information.

Alternatives et ressources

Des alternatives à Webflow incluent Elementor pour WordPress, Bootstrap pour une approche plus manuelle, et Wix pour ceux souhaitant une solution sans code.

Questions & Réponses

Les components permettent de modifier un élément à un endroit et de répercuter automatiquement cette modification partout où le component est utilisé, ce qui assure une cohérence et un gain de temps.
Le Global Style dans Webflow comprend les styles de base et les resets CSS pour typographie, liens et boutons, assurant ainsi une cohérence visuelle et réduisant la redondance des définitions de style sur tout le site.
Le Page Wrapper isole le style de la page du reste du document, permettant un contrôle précis sur les styles et les screens, ce qui est essentiel pour une bonne gestion du layout et du design spécifique à chaque page.