Mockup 2 Code : traduire un design visuel fourni en code.

L’objectif de ce brief: sur la base d’une maquette visuelle (en anglais, un mockup), 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.

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
  • Une section de contenu (pas forcément toutes les sections du template)
  • Pied de page
  • La page doit être 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.

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.
  • Les images vectorielles - icônes, logos - doivent être intégrées dans le site au format SVG.
  • La version mobile n’est pas obligatoire. Mais il est souhaitable de rendre votre site aussi “responsive” que possible.

Planification

  • 27 janvier: choix du mockup, balisage HTML.
  • 3 février: base CSS, couleur, typographie.
  • 10 février: en-tête.
  • 24 février: bloc de contenu.
  • 3 mars: footer.
  • 10 mars: finition et rendu.

Temps disponible: 7 périodes (5 heures).