Aller au contenu

TP noté — Reproduire une maquette web responsive 🧩

🎯 Objectif

Reproduire le plus fidèlement possible la page web fournie (mobile, tablette et ordinateur) à partir des éléments donnés :

  • Captures d’écran des trois formats
  • Contenus (textes, images, vidéo)
  • Palette de couleurs du projet

📁 Fichiers attendus

  • Un fichier HTML et un fichier CSS
  • Projet complet compressé et nommé avec votre nom et prénom

📜 Consignes générales

1. Structure HTML sémantique

  • Utiliser les balises adaptées
  • Respecter une hiérarchie claire des titres
  • Organiser le code avec des commentaires lisibles

2. Approche mobile first

  • Commencer la mise en page pour les petits écrans.
  • Ajouter ensuite des adaptations pour tablette et ordinateur.

3. Mise en page et style

  • Appliquer un reset minimal pour homogénéiser l’affichage
  • Utiliser des grilles fluides (Flexbox et/ou Grid)
  • Employer les couleurs du projet
  • Prévoir des espacements cohérents et une bonne lisibilité

4. Images et médias

  • Les images et la vidéo doivent s’adapter à la taille de l’écran
  • Ne pas déformer les proportions (voir aspect-ratio et object-fit)

5. Réactivité

  • Utiliser des media queries pour adapter la mise en page selon la taille de l’écran
  • Tester le rendu sur mobile, tablette et ordinateur

6. Qualité du code

  • Code indenté, lisible et commenté
  • Respect des bonnes pratiques vues en cours

7. Interactions

  • Le menu doit permettre de naviguer vers les sections correspondantes
  • Les boutons et liens doivent avoir un effet visuel au survol

✅ Checklist avant rendu

HTML

  • [ ] Structure sémantique correcte
  • [ ] Titres hiérarchisés
  • [ ] Code clair et commenté

CSS

  • [ ] Approche mobile first
  • [ ] Reset appliqué
  • [ ] Grilles fluides utilisées
  • [ ] Images et vidéos flexibles
  • [ ] Media queries pour tablette et ordinateur
  • [ ] Interractions sur le menus, les boutons et les liens
  • [ ] Code lisible et commenté

Rendu visuel

  • [ ] Page fidèle à la maquette
  • [ ] Bon espacement et lisibilité
  • [ ] Responsive sur mobile, tablette et ordinateur

🎨 Les couleurs

  • Blanc : #ffffff;
  • Gris très clair : #e7e4e4;

  • Gris clair : #cfc9c9;

  • Orange : #e6a037;

  • Orange clair : #f6ddb6;

  • Orange foncé : #c78829;

  • Marron : #3d2c2d;

✍️ Les polices

  • Corps de texte : system-ui, sans-serif
  • Titres, boutons, Menus : "Montserrat", system-ui, sans-serif (Bonus)

📜 Les contenus

Intro

  • Titre : "Telle est la voie"
  • Contenu : Cinq ans après la fondation de la Nouvelle République, un chasseur de primes mandalorien solitaire travaillant aux confins de la galaxie accepte un nouveau contrat : retrouver et capturer un enfant de 50 ans.
  • Bouton 1 :
  • URL https://www.disneyplus.com
  • Libellé : Voir sur Disney+
  • Bouton 2 :
  • https://www.youtube.com/watch?v=9HgRXwMozEY
  • Voir le pilote

Bande annonce

  • Titre : Voir la bande annonce
  • Légende : The Mandalorian est une série télévisée américaine de western spatial
    créée par Jon Favreau pour le service de streaming Disney+. Elle a été diffusée en novembre 2019.

Citation

  • Contenu : Je suis un mandalorien, les armes font partie de ma religion.
  • Légende : Din Djarin

Personnages

  • Titre : Personnages préférés
  • Personnages :
  • https://starwars.fandom.com/wiki/Din_Djarin
  • Din Djarin
  • Pedro Pascale

  • Chasseur de primes madalorien au grand cœur. Il aime les armures Beskar et a tendance à adopter des enfants de 50 ans.

  • https://starwars.fandom.com/wiki/Din_Grogu

  • Grogu
  • Puppets and CGI

  • Bébé affamé d'une espèce inconnue. Son entraînement partiel au temple Jedi lui donne une maîtrise relative de la Force.

  • https://starwars.fandom.com/wiki/Bo-Katan_Kryze">

  • Bo-Katan Kryze
  • Katee Sackhoff

  • Guerrier mandalorien et ancien dirigeant de Mandalore. Dirige le groupe madalorien appelé les Oiseaux de nuit.

  • https://starwars.fandom.com/wiki/The_Armorer

  • The Armorer
  • Emily Swallow

  • Chef d'une tribu de Mandaloriens sur Nevarro. A le don de forger, répéter et améliorer les armures madaloriennes de forger, de refaire et d'améliorer les armures madaloriennes.

  • https://starwars.fandom.com/wiki/Carasynthia_Dune

  • Cara Dune
  • Gina Carano

  • Ancien soldat de choc rebelle d'Aldérande devenu mercenaire. Guerrier et tacticien chevronné recruté par Din Djarin.

  • https://starwars.fandom.com/wiki/Peli_Motto

  • Peli Motto
  • Amy Sedaris

  • Mécanicien gérant un port spatial sur Tatooine. Réussit à réparer à peu près n'importe quel presque tous les vaisseaux et fait office de baby-sitter.

  • https://starwars.fandom.com/wiki/Gideon">

  • Moff Gideon
  • Giancarlo Esposito

  • Commandant d'un vestige impérial. Enleveur d'enfants, adepte des expériences sur le sang, a quelques Dark Troopers dans sa manche.

  • https://starwars.fandom.com/wiki/Greef_Karga">

  • Greef Karga
  • Carl Weathers
  • Chef de la guilde des chasseurs de primes. Donne des missions aux chasseurs de chasseurs de primes et s'assure que tout le monde respecte les règles.

Pied de page

  • Copyright 2025 - Fan page du Mandalorien

🗂️ Kit de démarrage