Aperçu — 16.1 — Site responsive professionnel — Yekola

Retour

Module 1 : Introduction à CSS

1.1 — Lier CSS à HTML Aperçu

🛠️ Projet 1 — Première mise en forme

Module 2 : Sélecteurs CSS

2.1 — Tous les types de sélecteurs Aperçu

🛠️ Projet 2 — Ciblage précis

Module 3 : Couleurs, fonds et dégradés

3.1 — Maîtriser les couleurs CSS Aperçu

🛠️ Projet 3 — Hero section

Module 4 : Typographie web

4.1 — Polices et texte Aperçu

🛠️ Projet 4 — Article typographié

Module 5 : Box Model — Le modèle de boîte

5.1 — Comprendre le Box Model Aperçu

🛠️ Projet 5 — Cartes produit

Module 6 : Display et positionnement

6.1 — Display : le comportement des boîtes Aperçu

🛠️ Projet 6 — Layout avec position

Module 7 : Flexbox — Layout flexible

7.1 — Flexbox fondamental Aperçu

🛠️ Projet 7 — Page centrée

Module 8 : Flexbox avancé

8.1 — Contrôler les enfants flex Aperçu

🛠️ Projet 8 — Layout 3 colonnes

Module 9 : CSS Grid — Layout en grille

9.1 — Grid fondamental Aperçu

🛠️ Projet 9 — Dashboard Grid

Module 10 : CSS Grid avancé

10.1 — Grid Areas et responsive Aperçu

🛠️ Projet 10 — Galerie auto-responsive

Module 11 : Responsive Design — Media Queries

11.1 — @media et breakpoints Aperçu

🛠️ Projet 11 — Site responsive

Module 12 : Mobile First — Approche pratique

12.1 — Techniques Mobile First Aperçu

🛠️ Projet 12 — Menu hamburger

Module 13 : Transitions et animations CSS

13.1 — Transitions et keyframes Aperçu

🛠️ Projet 13 — Page animée

Module 14 : Pseudo-classes et pseudo-éléments

14.1 — Pseudo-classes et pseudo-éléments Aperçu

🛠️ Projet 14 — Tableau stylé

Module 15 : Variables CSS et organisation

15.1 — CSS propre et scalable Aperçu

🛠️ Projet 15 — Design system

Module 16 : Projet final — Site responsive complet

16.1 — Site responsive professionnel Aperçu

Le reste de la formation est réservé aux inscrits.

S'inscrire gratuitement

Module 16 : Projet final — Site responsive complet Aperçu gratuit

16.1 — Site responsive professionnel

🏆 Projet certifiant — Site Portfolio Responsive

📋 Contexte

Vous créez le site portfolio d'un designer freelance. Le site doit être responsive, animé et professionnel. C'est la vitrine qui présente son travail au monde.

🎯 Exigences techniques

Mobile First : design de base pour mobile, enrichi pour desktop
Layout Grid : structure globale en CSS Grid (header, main, footer)
Composants Flexbox : navbar, galerie, cartes, footer
Variables CSS : couleurs, espacements, bordures dans :root
Responsive : 3 breakpoints (mobile, tablette, desktop)
Animations : hover sur cartes, fade-in au scroll, menu mobile fluide
Dark mode : via prefers-color-scheme
Organisation BEM : nommage cohérent

✅ Critères d'évaluation

Critère	Excellent	Satisfaisant	Insuffisant
Responsive	3 breakpoints, adaptation fluide	2 breakpoints	Non responsive
Grid/Flexbox	Grid pour structure, Flexbox pour composants	Un seul utilisé	Ni Grid ni Flexbox
Variables	:root + dark mode	Variables sans dark mode	Pas de variables
Animations	2+ animations pertinentes	1 animation	Aucune
BEM	Nommage cohérent partout	Partiellement	Pas de méthodologie

🎉 Livrez le site (GitHub Pages/Netlify) pour valider la certification CSS3.

⏱️ Temps estimé : 5-6 heures

Ceci est un aperçu gratuit.
Voir la formation complète