Dans cet exercice, je devais reproduire la page d’accueil du site Apple.
Compétences acquises:
- Analyser la structure d’une page web
- Comprendre le DOM d’une page
- Écrire son code HTML et CSS dans les règles de l’art
Définition du DOM
Ensuite, j’ai procédé à la définition du DOM de la page, comprenant les titres, sous-titres, paragraphes, liens et images. Puis, j’ai organisé mes fichiers en créant un dossier principal avec des sous-dossiers pour les images et le CSS. Dans Visual Studio Code, j’ai créé un fichier index.html pour débuter.
Écriture du code
Avant de commencer à coder le contenu de ma page web, j’ai d’abord créé le DOCTYPE HTML (<!DOCTYPE html>) pour indiquer au navigateur le type de document à charger. J’ai ensuite mis en place la structure de base HTML avec les balises <html>, <head> et <body>. Dans la section <head>, j’ai lié ma feuille de style externe en utilisant la balise <link>, ce qui m’a permis de connecter ma page HTML au fichier CSS et de centraliser la gestion de l’apparence visuelle.
Pour la création de la barre de navigation, j’ai utilisé une structure en liste non ordonnée (<ul>) avec plusieurs éléments de liste (<li>) contenant chacun un lien (<a>). J’ai ensuite stylisé cette barre avec le CSS en appliquant la propriété display: inline-block pour afficher les éléments côte à côte. J’ai également personnalisé les couleurs, les marges et le survol (:hover) pour améliorer l’esthétique et l’ergonomie.
Afin de bien organiser le contenu, j’ai divisé la page en plusieurs sections à l’aide des balises <div>. Chacune contient un titre, un paragraphe descriptif et, dans certains cas, des images insérées avec la balise <img>. J’ai veillé à bien renseigner les attributs src et alt pour chaque image, dans une logique à la fois accessibilité et référencement.
Pour les deux dernières sections de ma page, j’ai mis en place un système de mise en page responsive grâce à Flexbox. En utilisant display: flex et des propriétés comme justify-content et align-items, j’ai organisé le contenu en deux colonnes distinctes, ce qui offre une présentation claire et équilibrée, aussi bien sur ordinateur que sur mobile.
