Master 1 - mention Audiovisuel, Médias Interactifs Numériques, et Jeux - parcours Direction de Projets Numériques

Ateliers

Les ateliers permettent d’aborder les notions du cours à travers des exercices concrets. Ils donnent l’occasion de manipuler les outils, de tester des idées et de se familiariser avec les étapes essentielles d’un projet numérique.

Voir tous les ateliers
ATELIER

Construire une page en HTML & CSS

Usages des techniques numériques – Maitriser les technologies du web

INTERMÉDIAIRE

Description

Cet atelier propose une première mise en pratique des bases du web : structurer une page avec l’HTML et lui donner forme avec le CSS. À partir d’une maquette simple, l’objectif est de comprendre comment une interface se construit, comment les éléments se hiérarchisent et comment la mise en page se met en place. L’atelier permet d’appréhender le passage d’un visuel à un code propre, lisible et cohérent, dans des conditions proches d’un travail d’intégration réel.

Objectifs pédagogiques

  • Comprendre la structure d’une page web : Organiser le contenu à l’aide de balises sémantiques, établir une hiérarchie claire et préparer une base solide pour la mise en forme.
  • Mettre en page avec le CSS : Appliquer les styles essentiels, gérer les espacements, les couleurs, la typographie et utiliser Flexbox pour construire une mise en page moderne.
  • Rendre la page correcte sur différents formats : Effectuer les ajustements nécessaires pour assurer une mise en forme lisible sur mobile.
  • Développer de bonnes pratiques de code : Produire un HTML propre, un CSS structuré et commenté, avec une attention particulière portée à la lisibilité et à la cohérence de l’ensemble.

Sommaire

  1. Introduction → bases du HTML et du CSS
  2. Contexte → reproduction d’une mini-landing page
  3. Brief → objectifs de la réalisation
  4. Déroulé de l’atelier → progression en 4 phases
  5. Livrables → éléments à rendre
  6. Posture attendue → méthode et cohérence
  7. Évaluation → critères et pondération

Atelier 2. Construire une page en HTML & CSS

1. Introduction

Présentation du rôle de chaque langage et de leur complémentarité :

  1. structure pour l’HTML,
  2. mise en forme pour le CSS.

2. Contexte

  1. Présentation du cas pratique : une page sur le thème de l’exploration spatial,
  2. À reproduire selon l’image fournie.

3. Brief 

  1. Structure attendue : header, hero, section d’articles, footer.
  2. Contraintes : HTML sémantique, CSS clair, code propre.

4. Déroulé de l’atelier

  1. Structure HTML,
  2. Mise en page CSS, responsive rapide,
  3. Revue collective.

5. Livrables

  1. Dossier zippé contenant :
    – index.html,
    – style.css
    – et les images.
  2. Code propre et visuel fidèle.

6. Posture attendue

  1. Rigueur,
  2. lisibilité du code,
  3. organisation du CSS,
  4. respect des conventions.

7. Évaluation

Grille en cinq axes :

  1. structure HTML,
  2. organisation CSS,
  3. fidélité visuelle,
  4. responsive,
  5. qualité du code.
Voir l'Atelier 2 - HTML-CSS