Apprenez à styliser vos pages web
CSS de A à Z
CSS est le langage de style du web.
C'est grâce à lui que vous pourrez animer, styliser, mettre en page et structurer la disposition de vos pages. Il est incontournable.
"Mais CSS, c'est trop facile"
Cette remarque était plutôt vraie il y a une quinzaine d'années, mais CSS a énormément évolué et compte aujourd'hui des centaines de propriétés et des milliers de valeurs différentes.
Tout le monde peut changer une couleur en CSS, mais combien maîtrisent vraiment ce langage ?
Certes, CSS est simple à prendre en main, car tout le monde peut écrire un "background-color", mais combien connaissent l'empilement des couches, les layouts et leurs particularités, tous les modules de positionnement modernes, etc ... ?
Beaucoup de gens cachent la poussière sous le tapis
Ils foncent vers les Frameworks JS, en se disant que ce n'est pas important d'être bon en CSS, grave erreur.
Ils se retrouvent avec des applications web sous forme de machines à gaz, avec du code tout sauf maintenable, bourrés de bugs et de comportements qu'ils ne peuvent même pas comprendre.
La solution ? prendre son temps et ne surtout pas négliger de technologie en particulier.
Soufflez, quand on apprend le développement web moderne, il faut une vision à moyen-long terme, on ne devient pas un expert absolu en 1, 3 ou 6 mois. Le temps que vous prendrez à bien maîtriser CSS vous sera rendu au centuple plus tard, c'est un fait.
Ce cours, c'est plus de 10 heures de contenu, spécialement pour vous.
J'ai littéralement récréé une documentation téléchargeable que vous allez pouvoir parcourir en suivant les leçons, exercices et projets avec moi.
Mon but a été de créer un contenu pédagogique permettant de découvrir ce langage de A à Z.
Passez de débutant/intermédiaire à un niveau avancé.
Découvrez ou redécouvrez toutes les notions importantes de ce langage.
J'ai pris soin de mélanger du contenu théorique et pratique, des exercices, des projets, des quizz et un projet final réalisé de manière professionnelle
Curriculum
- Section 1 : Les bases du CSS
- Section 2 : Les règles du CSS
- Section 3 : Propriétés et concepts importants
- Section 4 : Le "responsive design"
- Section 5 : Flexbox
- Section 6 : CSS Grid
- Section 7 : Animations
- Section 8 : Débugger son CSS
- Section 9 : CSS Avancé.
- Section 10 : Projet final
Les avantages d'être un pro du CSS sont multiples. ❤️
Vous vous démarquerez instantanément de ceux qui n'ont pas pris la peine d'y faire attention, on repère en effet très rapidement quelqu'un qui sait ce qu'il fait, ou pas.
Vos pages seront plus esthétiques, pratiques, accessibles et professionnelles.
Vous gagnerez un temps fou sur les bugs que vous n'aurez pas à corriger.
Vous coderez plus rapidement.
"Oui mais le CSS n'est pas un langage d'avenir" ❌
Faux, quoique vous fassiez et quel que soit l'outil que vous utiliserez, il faudra toujours comprendre le code que vous avez en fasse de vous et prendre les bonnes décisions.
Le CSS est aujourd'hui et depuis le début du web **le** langage incontournable pour styliser les pages web, il est littéralement utilisé sur des milliards de page.
On peut facilement se projeter un peu dans le futur pour comprendre qu'il le sera toujours pendant des années.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Téléchargement de la première section (3:24)
- Déclarer son CSS (9:57)
- La sélection partie 1 (10:21)
- La sélection partie 2 (11:31)
- Les couleurs (13:10)
- Spacing et bordures (19:05)
- Largeur et hauteur partie 1 (12:35)
- Largeur et hauteur partie 2 (12:33)
- Le modèle de boîte (12:52)
- La propriété Display (5:49)
- Les images, partie 1 (9:21)
- Les images, partie 2 (11:14)
- Styliser des vidéos (4:47)
- Gérer le texte (19:01)
- Utiliser Google Font (10:02)
- Utiliser une police téléchargée (6:42)
- Tronquer un texte (3:36)
- Intro de l'exercice : Coder un bouton (3:37)
- Résolution de l'exercice : Coder un bouton (4:03)
- Intro de l'exercice : Coder une carte (0:38)
- Résolution de l'exercice : Coder une carte (12:18)
- Intro de l'exercice : Coder un article de blog (0:55)
- Résolution de l'exercice : Coder un article de blog (11:10)
- Les pseudo-classes (7:29)
- Les sélecteurs (11:08)
- Les pseudo éléments (5:29)
- Les positions (13:46)
- Le contexte d'empilement (8:00)
- Les variables CSS (3:45)
- Les unités de mesure (10:51)
- Design system : Explication (7:06)
- Float et le bug des floats (3:48)
- Les "vendors prefixes" (3:58)
- Ombre et "outline" (7:10)
- Opacité et visibilité (4:32)
- Comprendre la propriété overflow (2:33)
- La fusion des marges (2:24)
- Intro de l'exercice : La sélection (1:18)
- Résolution de l'exercice : La sélection (5:40)
- Intro de l'exercice : Le millefeuille (0:53)
- Résolution de l'exercice : Millefeuille (4:21)
- Intro de l'exercice : La navbar (0:40)
- Résolution de l'exercice : La navbar (3:55)
- Intro de l'exercice : Le formulaire (0:47)
- Résolution de l'exercice : Le formulaire (10:13)
- Intro de l'exercice : Texte 3D (0:31)
- Résolution de l'exercice : Texte 3D (2:16)
- Intro de l'exercice : Texte autour d'une image (0:45)
- Résolution de l'exercice : Texte autour d'une image (5:54)
- Fun : Le pixel art et la découverte de codepen (5:34)
- Introduction à Flexbox (4:00)
- Créer notre premier container (4:30)
- Les propriétés du container (8:13)
- Les propriétés des enfants (12:55)
- Intro de l'exercice : Flex Time ! (1:33)
- Résolution de l'exercice : Flex Time ! (8:00)
- Intro de l'exerice : Navbar responsive avec Flexbox (11:33)
- Résolution de la navbar responsive (13:33)
- Projet : Coder une galerie stylée (8:05)
- Introduction à CSS Grid (1:33)
- Notre première grille (4:36)
- Repeat et l'unité de mesure "fr" (4:29)
- Placer des items (6:13)
- Nommer des lignes et des aires (4:54)
- Rangées et colonnes implicites (2:13)
- Alignement grille et items (3:48)
- Min-content, max-content, et la fonction minmax() (1:59)
- auto-fill() et auto-fit() (4:58)
- Intro de l'exercice : Listes responsive (1:14)
- Résolution de l'exercice : Listes responsive (13:37)
- Intro de l'exercice : Disposition type blog (1:29)
- Résolution de l'exercice : Disposition type blog (7:24)
- Introduction aux animations CSS (2:14)
- La propriété transform (7:05)
- Les transitions (6:18)
- Animer les couleurs de manière performante (6:55)
- Créer un effet "clic" en pur CSS (6:00)
- Les pseudo-elements et les transitions (16:08)
- Les animations (9:19)
- La perspective (6:12)
- Coder un cube 3D en CSS (8:42)
- Coder une carte tournante (7:03)
- Coder une animation de pulsation (4:12)
- Animation d'un loader (3:37)
- Coder un effet marquee (4:47)
- Animation de lien (4:46)
- Coder un effet "glitch" (7:34)
- Présentation du projet final (2:45)
- Analyser et intégrer un "Design system" (7:30)
- Coder l'HTML du header (4:15)
- Coder le CSS de la "Hero section" (15:52)
- Coder l'HTML de la section "Activities" (5:57)
- Coder le CSS de la section "activities" (16:24)
- Coder la section parallax (5:18)
- Coder l'HTML de la section "Pricing" (4:24)
- Coder le CSS de la section "pricing" (13:34)
- Coder l'HTML de la section de contact et du footer (2:23)
- Coder le CSS de la partie Contact et du Footer et remerciements. (10:15)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants