Ceci est une ancienne révision du document !
# HTML/CSS Minimal
## Consignes
Créez une page web “Profil personnel” en respectant les contraintes ci-dessous.
## Partie 1 : Structure HTML
Créez un fichier index.html contenant :
Structure de base
- Doctype, html, head, body
- Métadonnées (charset UTF-8, titre, lien CSS)
En-tête
- Un titre principal avec votre nom
- Une navigation avec 3 liens (Accueil, Compétences, Contact)
Contenu principal
- 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
Pied de page
- Votre email dans un lien cliquable
- L'année actuelle
## Partie 2 : Style CSS
Créez un fichier style.css avec :
Style général
- Police personnalisée pour toute la page
- Couleur de fond
- Marges intérieures du body
En-tête et navigation
- Centrer le titre
- Navigation en ligne (flexbox ou inline-block)
- Changer la couleur des liens au survol
Contenu
- Image ronde avec bordure
- Largeur maximale du contenu (800px)
- Espacement entre les éléments
Responsive
- Au moins une media query pour mobile
## Bonus
- Utiliser une Google Font
- Ajouter des transitions sur les liens
- Créer un effet hover sur l'image
## Concepts à maîtriser
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
jcheron