Chapitre 1000 | Exercice d’intégration final

Durée : entre 3h et 7h

La maquette desktop

La maquette Mobile

La maquette Mobile avec Navigation dépliée

Ce que l’on va construire

Ce chapitre est l’exercice de synthèse de tout ce que vous avez appris depuis le début du cours. Il n’y a plus d’étapes détaillées cette fois : c’est à vous de construire la page en autonomie, en mobilisant les briques déjà vues (structure sémantique, Flexbox, variables CSS, formulaire, tableau, iframe, bibliothèque externe, menu burger, etc.).

En vous référant aux 3 maquettes fournies en en-tête du présent chapitre (desktop, mobile, et mobile avec navigation dépliée), veuillez intégrer cette maquette.

La page est un catalogue vivant : chaque section se nomme et se définit elle-même avant de démontrer concrètement la technique qu’elle illustre (Hero Section, Cards, Slider, vidéo intégrée, carte intégrée, tableau, formulaire…).

Besoin d’un coup de pouce ?

Si vous ne savez pas comment commencer, voici un squelette HTML de départ, avec uniquement la structure des sections dans l’ordre attendu — à vous de le compléter avec les classes, le contenu et le CSS nécessaires.

La correction, section par section

Plutôt qu’un seul gros bloc de correction, chaque section a la sienne : si vous êtes bloqué sur un seul point précis, inutile de tout regarder — ouvrez uniquement la correction qui vous concerne.

Attention : pour fonctionner, chaque section a besoin, en plus de son propre code, du CSS commun ci-dessous (variables, reset, styles génériques) — à copier une seule fois dans votre fichier, quelle que soit la section sur laquelle vous travaillez. Certaines sections (menu burger, slider) ont aussi besoin du JS commun, plus bas.

CSS commun (nécessaire pour toutes les sections)

JS commun (nécessaire pour le menu burger et le slider)

Les 11 corrections, section par section

Header (logo, nav par ancres, menu burger)

Hero Section (full viewport, chapitre 650)

Hero Section secondaire (texte + image)

Cards (3 cards en Flexbox)

Bandeau image en arrière-plan (chapitre 150)

Slider (bibliothèque externe Splide, chapitre 810)

Vidéo intégrée (iframe responsive, chapitre 90)

Carte intégrée (iframe Google Maps, chapitre 95)

Tableau (chapitre 600)

Formulaire (chapitre 595)

Footer + bouton retour en haut (chapitre 135)

A n’utilisez qu’en extrême recours :

Chapitre 1000 annexe | La correction complète assemblée

Le chapitre 1000 propose une correction découpée en 11 parties, section par section. Si vous préférez comparer votre travail avec la page complète assemblée (HTML, CSS et JavaScript réunis dans un seul fichier), la voici ci-dessous.

Avant proposLexiqueIntégration WebRecours à l'IAChapitre 1 | Présentation de CodePenChapitre 5 | Afficher du texte avec HTML [ p / h ]Chapitre 10 | Comprendre la cascade en CSSChapitre 15 | Propriétés CSS pour le style des textesChapitre 17 | Sites de référencesChapitre 18 | Listes ordonnées et non ordonnéesChapitre 20 | A propos des commentairesChapitre 25 | Classes combinées et des déclarations communesChapitre 30 | VS Code & Structure minimale de page HTML5Chapitre 35 | Organiser les fichiers HTML et CSS dans un répertoireChapitre 40 | Insérer une image dans une page HTMLChapitre 50 | Placehold.co pour des images temporaireschapitre 55 | L'indentation en HTML et CSSChapitre 60 | Gagner en productivité sous VScodeChapitre 65 | La fonction "openfolder" et l'affichage multi onglet avec VScodeChapitre 70 | Balises ouvrantes, fermantes et orphelinesChapitre 75 | Vocabulaire essentielChapitre 80 | Sélecteurs imbriqués en CSSChapitre 85 | La balise SPANChapitre 90 | Comprendre les unités de mesure en CSSChapitre 92 | Sélecteurs multiples en CSSChapitre 94 | Intégration d'une vidéo YouTubeChapitre 95 | Intégration d’une Google MapChapitre 100 | Différencier une Page Web du DOMChapitre 105 | Padding et MarginChapitre 110 | Propriétés CSS padding et marginChapitre 115 | Rôle du DIVChapitre 120 | Le flux du texteChapitre 125 | Retour à la ligne [code vs affichage]Chapitre 130 | Z-indexChapitre 135 | Position FixedChapitre 140 | Position AbsoluteChapitre 145 | Fixed vs AbsoluteChapitre 150 | Image en BackgroundChapitre 155 | Les BordersChapitre 160 | Police de caractère OnlineChapitre 165 | Les boutonsChapitre 170 | Responsive : media queriesChapitre 175 | Pseudo-éléments ::before et ::afterChapitre 180 | Les liens HypertexteChapitre 185 | Les transitions animéesChapitre 190 | Navigation avec des ancresChapitre 300 | Flexbox et GridChapitre 500 | Base FlexChapitre 505 | Direction des enfants (flex-direction)Chapitre 510 | Alignement horizontal (justify-content)Chapitre 510 | Alignement vertical (align-items)Chapitre 515 | Gestion des retours à la ligne (flex-wrap)Chapitre 520 | Alignement des lignes (align-content)Chapitre 525 | Flex : Autres propriétésChapitre 550 | Bâtir une Card avec FlexboxChapitre 560 | Les dégradés / GradientsChapitre 570 | Les intégrations SVGChapitre 580 | Les Variables couleurs CSSChapitre 581 | Autres exemple de variablesChapitre 585 | La fonction calc() en CSSChapitre 590 | FormulaireChapitre 595 | Inputs de formulaire avancésChapitre 600 | Un tableau simpleChapitre 650 | Une Hero Section en full viewportChapitre 700 | Balises sémantiques essentielles HTML5Chapitre 710 | Favicon et balises meta de base (meta description)Chapitre 720 | Retour sur les chemins relatifs et absolusChapitre 800 | Intégrer du JavaScript de base dans une page HTMLChapitre 810 | Intégrer une bibliothèque externe (slider d'images)Chapitre 850 | Créer un menu responsive (avec burger)Chapitre 900 | Bouton back to topChapitre 910 | Un mémo sur l'ordre LVHAChapitre 1000 | Exercice d'intégration finalChapitre 1010 | Mettre ses fichiers en ligne avec FileZilla