Dans le cours Créez votre site internet avec HTML5 et CSS3, vous avez créé votre premier site internet en HTML/CSS et vous avez acquis de solides connaissances, aussi bien en HTML qu’en CSS. Mais aujourd’hui vous voulez aller plus loin en ajoutant plus de pages et plus de contenu. Pour étoffer votre CSS, vous créez des sélecteurs, puis vous en rajoutez d’autres… Finalement, ce sont des centaines de lignes de CSS qui sont créées, les unes à la suite des autres et sans aucune structure. Seulement, il serait plus prudent de repasser sur votre code avant que tout dégénère.
Mais pourquoi aurais-je besoin de simplifier mon CSS, si mon site fonctionne ?
Excellente question ! Lorsque j’ai commencé à coder, le cadet de mes soucis, c’était de penser à l’organisation de mes fichiers ou à la structure de mon HTML/CSS. Prendre le temps de simplifier tout pour plus tard ? J’y pensais encore moins ! Avec le temps, tout s’entasse et un beau jour on regrette amèrement de ne pas avoir tout anticipé plus tôt. On aurait gagné du temps aussi bien dans la rédaction que dans l’implémentation.
C’est pourquoi je vous propose dans ce cours de répondre aux trois questions suivantes :
Comment écrire du CSS qui soit clair, organisé et surtout bien structuré ?
Comment m’assurer que mon code est maintenable ?
Comment coder plus vite et de manière plus efficace ?
Rencontrez votre professeur
Kassandre suivait une formation linguistique avant de tout quitter pour faire partie de la deuxième promotion de 42 Paris en 2014. Elle n’a cessé de coder depuis. Passionnée de sports extrêmes, de glisse et de photographie, elle rejoint Pexels en 2020 en tant qu’ingénieure backend.
Ayant une appétence forte pour l’éducation, elle est aussi freelance sur son temps libre, pour transmettre sa passion et son expérience.
Découvrez le fonctionnement du cours
L’objectif de ce cours est de vous donner les clés pour simplifier votre CSS, et non de vous embrouiller à coups de notions complexes. Pour cela, nous avons scindé le cours en deux parties distinctes.
Dans la première partie, vous apprendrez à structurer votre code. Avant de foncer tête baissée, nous allons déjà commencer avec votre HTML. Car oui, simplifier votre HTML est tout aussi important que de simplifier votre CSS ! Anticiper la façon de structurer votre code avant d’écrire la moindre ligne de code est très important, et cela vous fera gagner du temps par la suite.
Dans la deuxième, nous aborderons les préprocesseurs CSS et notamment Sass, afin d’optimiser notre code. De la structure à la lisibilité, en passant par l’écriture : vous saurez simplifier votre CSS, c’est certain. Nous allons aussi aborder des notions de simplification générale que vous pourrez appliquer tout au long de votre parcours professionnel, quels que soient les projets.
Pour vous aider, nous allons pas à pas reprendre des parties du projet final du cours HTML. Chacune des deux parties de ce cours sera divisée en chapitres qui contiendront :
un contenu théorique pour apprendre comment appliquer les concepts abordés ;
des vidéos, où nous mettrons en pratique les concepts abordés dans le texte ;
des exercices, pour vous aider à pratiquer de votre côté ce que nous aurons vu ensemble.
Pour les exercices nous utiliserons CodePen, un éditeur de code en ligne qui vous permet de tester, bidouiller et pratiquer sans installer quoi que ce soit sur votre ordinateur. Le bonus ? Il est gratuit !
En fin de partie, vous pourrez tester votre compréhension des concepts clés grâce aux quiz.
Découvrez le fil rouge du cours
Nous reprendrons le projet du cours Créez votre site internet avec HTML5 et CSS3. Nous partirons du code HTML5 et CSS3, puis appliquerons les nouvelles notions. Ne vous inquiétez pas, tout sera accessible via CodePen pour que vous puissiez à la fois suivre le cours et mettre en pratique les notions abordées.
Alors pratiquez, essayez, faites des erreurs, apprenez, et vous progresserez sans même vous en rendre compte : la pratique est au centre de l’apprentissage.
Une fois que c'est fait, si vous êtes prêt, nous pouvons commencer avec la première étape : simplifier votre code. On voit ça dans le prochain chapitre !
