| layout | title | permalink |
|---|---|---|
page |
Mockup 2 Code |
mockup2code.html |
Mockup 2 Code : traduire un design visuel fourni en code.
L'objectif de ce brief: sur la base d'une maquette visuelle, produire le code HTML/CSS permettant de la reproduire dans le navigateur.
Un choix de maquettes est disponible dans Figma.
Cet exercice peut être réalisé individuellement, ou en binôme, dans le but de:
- Pratiquer la collaboration avec Git (synchronisation du code).
- Apprendre par la collaboration.
Les binômes seront déterminés aléatoirement.
- Tout le texte doit être du "vrai texte". Le texte sous forme d'image est proscrit.
- Utiliser, à chaque fois que cela fait sens, les sept balises HTML sémantiques (
header,footer,nav,section,article,aside). - Rendre les classes CSS réutilisables, pour éviter la duplication de code.
- La version mobile n'est pas obligatoire.
Planification:
- 30 septembre: choix du mockup, balisage HTML.
- 14 octobre: base CSS, couleur, typographie.
- 04 novembre: en-tête.
- 11 novembre: bloc contenu 1.
- 18 novembre: bloc contenu 2.
- 25 novembre: finition.
Temps disponible: 12 périodes (9 heures).
Une page web codée en HTML et CSS, correspondant au plus près à la maquette.
Les éléments indispensables:
- En-tête de page avec menu de navigation
- Pied de page
- Deux sections de contenu (pas forcément toutes les sections du template)
- Page publiée sur Github (avec Github Pages ou Netlify)
- Respect des consignes.
- Qualité, organisation et structure du code.
- Utilisation des fonctionnalités CSS (flexbox, grid).
- Gestion du workflow Git.
Voir la grille d'évaluation (lien Teams)