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

Création de Sections en CSS avec Utility Classes

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

Apprenez à créer une section CSS cohérente et réutilisable en utilisant des Utility Classes et des structures en grid dans Webflow.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous allons créer une section CSS structurée et réutilisable juste en dessous de la section héros existante. Nous allons utiliser des Utility Classes pour garantir la cohérence et permettre la réutilisation des éléments. La configuration passe par la création de classes de base telles que section_underscore_update, update_underscore_component, et update_underscore_information. En utilisant le model client-first, nous nous assurons que chaque section utilise des padding et margins cohérents. Nous verrons également comment configurer une grid à trois colonnes pour afficher les éléments de manière structurée.
Puis, nous ajouterons des éléments individuels avec des tags HTML spécifiques comme h2, link et text-link.

Ensuite, nous nous pencherons sur l'ajout des cartes en utilisant une utilitaire de classe 'title-wrapper'. Nous verrons comment utiliser des classes flex et grid pour obtenir une disposition idéale et ajuster les espacements avec des paddings et marges appropriés. Pour les images et les textes, nous aborderons l'application de paramètres de flexibilité verticale et de gaps afin de garantir une disposition homogène et esthétique. Enfin, nous vérifierons l'affichage global et ajusterons les derniers détails pour s'assurer d'un rendu visuel optimal.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :
- Créer et utiliser des Utility Classes pour des sections CSS réutilisables.
- Configurer une structure en grid pour un layout cohérent.
- Appliquer des paddings, marges et gaps de manière efficace.

Prérequis pour cette leçon

Avant de suivre cette vidéo, assurez-vous d'avoir une connaissance de base de CSS, HTML et du workflow de Webflow.

Métiers concernés

Les compétences abordées dans cette vidéo sont pertinentes pour des métiers tels que Développeur Front-End, Designer Web et Intégrateur Web.

Alternatives et ressources

D'autres outils pour créer des layouts similaires incluent Adobe XD, Figma, et Sketch pour le design, ainsi que des frameworks CSS comme Bootstrap et Tailwind CSS.

Questions & Réponses

Les Utility Classes permettent de créer des sections réutilisables avec des règles CSS prédéfinies, ce qui garantit une cohérence à travers le site et simplifie les mises à jour et modifications.
Pour configurer une grid à trois colonnes dans Webflow, vous devez définir le display de votre conteneur sur grid, puis spécifier trois colonnes et une ligne dans les paramètres de grid.
L'utilisation du modèle client-first dans Webflow assure que le site reste organisé avec des conventions de nommage claires et des classes réutilisables, facilitant ainsi la maintenance et les mises à jour.