CSS pour Débutants est une introduction pratique à la mise en forme du HTML, organisée en neuf laboratoires guidés. Vous commencerez par créer et relier une feuille de style externe, puis développerez un vocabulaire concret de sélecteurs et de propriétés pour le texte, les couleurs, les arrière-plans, les espacements, les dimensions et les éléments courants d’une page.
Chaque laboratoire porte sur un petit changement visible que vous pouvez examiner dans l’aperçu du navigateur. Le parcours va des bases du CSS à Flexbox, à une navigation horizontale créée avec une liste, à des tableaux plus lisibles, puis à une première utilisation des classes utilitaires Tailwind CSS chargées par CDN.
Ce que vous apprendrez
À l’issue de ce cours, vous serez en mesure de :
- Créer une feuille de style externe, la relier au HTML et cibler le contenu avec des sélecteurs d’élément, de classe, d’ID, groupés et descendants
- Mettre en forme du texte avec la couleur, une taille en pixels, la graisse, l’alignement, l’interligne et la famille de polices
- Appliquer des couleurs hexadécimales et RGB, des images d’arrière-plan, des règles de répétition et un positionnement du fond
- Comprendre la largeur du contenu, les marges internes, les bordures, les marges externes et
box-sizing: border-boxdans le modèle de boîte CSS - Construire des mises en page Flexbox simples avec des contrôles de direction, de répartition, d’alignement et de retour à la ligne
- Transformer une liste en navigation horizontale et rendre un tableau plus lisible avec bordures, espacements, en-têtes et alignement
- Charger Tailwind CSS par CDN et combiner des utilitaires simples d’arrière-plan, de texte, de marge interne et de Flexbox
À qui s’adresse ce cours
Ce cours s’adresse aux personnes qui débutent complètement en CSS, aux apprenants HTML prêts à mettre en forme des pages simples et aux développeurs souhaitant réviser rapidement les mécanismes fondamentaux du style.
Prérequis : Une connaissance élémentaire des balises et attributs HTML est recommandée. Les laboratoires fournissent des fichiers HTML préparés, mais connaître head, body, div, les listes, les tableaux, les classes et les ID vous aidera à vous concentrer sur le CSS.
Environnement d’apprentissage : Les neuf laboratoires s’exécutent dans un WebIDE Ubuntu 22.04 accessible depuis le navigateur, avec des fichiers de projet préparés et un aperçu Web 8080. Vous modifierez directement le HTML et le CSS, puis actualiserez ou ouvrirez l’aperçu pour observer chaque changement visuel.
Questions fréquentes
Dois-je connaître le HTML avant de suivre ce cours ?
Vous n’avez pas besoin d’un niveau avancé, mais les bases sont utiles puisque le CSS sélectionne et met en forme la structure HTML. Les exercices se concentrent sur le CSS et fournissent généralement le balisage de la page au lieu d’enseigner en profondeur la création d’un document HTML.
Vais-je créer un site web complet ou un portfolio ?
Non. Le cours comporte neuf laboratoires guidés et ciblés, sans projet final ni défis autonomes. Vous apporterez des modifications précises à des pages préparées afin d’observer le comportement de chaque sélecteur et propriété.
Le cours enseigne-t-il le responsive web design ?
Seulement en introduction. Le laboratoire Flexbox couvre la direction, l’alignement, la répartition et le retour à la ligne, utiles aux mises en page flexibles, mais le cours n’aborde ni les media queries, ni CSS Grid, ni les points de rupture, ni un processus mobile-first complet.
Jusqu’où va l’apprentissage de Tailwind CSS ?
Un laboratoire présente Tailwind par CDN et utilise quelques utilitaires d’arrière-plan, de texte, de marge interne et de Flexbox. L’installation avec un outil de build, la configuration, les variantes responsives ou d’état, la conception de composants et l’optimisation en production ne sont pas couvertes.
