Synthèse Bases HTML/CSS

Créez une page web “Profil personnel” en respectant les contraintes ci-dessous.

Créez un fichier index.html contenant :

• Doctype, html, head, body
• Métadonnées (charset UTF-8, titre, lien CSS)

• Un titre principal avec votre nom
• Une navigation avec 3 liens (Accueil, Compétences, Contact)

• Une image de profil
• Un paragraphe de présentation
• Une liste non ordonnée de 3 hobbies
• Une liste ordonnée de 3 compétences

• Votre email dans un lien cliquable
• L'année actuelle

Créez un fichier style.css avec :

• Police personnalisée pour toute la page
• Couleur de fond
• Marges intérieures du body

• Centrer le titre
• Navigation en ligne (flexbox ou inline-block)
• Changer la couleur des liens au survol

• Image ronde avec bordure
• Largeur maximale du contenu (800px)
• Espacement entre les éléments

• Au moins une media query pour mobile

• Utiliser une Google Font
• Ajouter des transitions sur les liens
• Créer un effet hover sur l'image

HTML :

• Structure (doctype, head, body)
• Balises sémantiques (header, main, footer, nav)
• Titres (h1-h6), paragraphes, listes
• Liens et images
• Attributs (class, id, src, href)

CSS :

• Sélecteurs (élément, classe, id)
• Box model (margin, padding, border)
• Couleurs et typographie
• Display et positionnement
• Flexbox (bases)
• Media queries
• Pseudo-classes (:hover)

Temps recommandé : 45-60 minutes