Mockup 2 Code

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.

Détails importants

• 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).

Production à rendre

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)

Critères d’évaluation

• 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)