TP M1106 n°4

1er site web adaptatif personnel HTML 5 / CSS 3

html5 CSS3 M1106 rwd

La séance de ce TP est dédié à la réalisation de votre site web personnel HTML/CSS adaptatif (responsive) sans utilisation de boîte à outils (framework).

Ce travail est à réaliser individuellement et n'est pas un copier-coller de code issu d'Internet.

Vous devez créer un site composé de trois pages (ou plus, mais 3 suffisent) avec un menu fonctionnel et associé aux (au moins 3) pages de votre site bien sûr.

  • Ce projet doit mettre en avant vos compétences acquises en HTML, CSS, Site web adaptatif sans utilisation de framework.
  • Pas de javascript, en particulier votre menu est un menu habillé en CSS uniquement.
  • Le sujet est libre : un site personnel, un hobby, une association fictive ou réel, un film, un réalisateur, un livre, un auteur, un langage informatique, un protocole réseau, un cours de l'IUT, etc.
  • Il n'est pas demandé un site complet. Votre site est en quelque sorte un démonstrateur de ce que vous savez faire.
  • Vous devez (ce qui rapportera des points) :
    1. Avoir un site web adaptatif (responsive) (au moins deux affichages différents en fonction de la taille écran - petit/grand écran - vous êtes libre d'utiliser une grillle 12 colonnes ou bien le système CSS Grid Layout - vous devez connaître les deux) ;
    2. Avoir un site fait exclusivement en CSS et HTML en suivant les recommandations d'écriture de ce module et du W3C ;
    3. Avoir un code clair et simple (utiliser correctement la hiérarchie au niveau du CSS) ;
    4. Avoir un tableau habillé (en CSS) ;
    5. Avoir un menu (sans javascript) (en CSS) ;
    6. Avoir un formulaire habillé (Ne pas faire la page action du formulaire en charge de le traiter) ;
    7. Avoir un site ne contenant pas de fautes d'orthographe, à vous de tout vérifier.
      • En particulier -1 point pour Acceuil😱🤢🤮😭 au lieu d'Accueil🥳🥳🥳🎉🎉🎉...
    8. Être créatif par rapport au TP précédent (Faire quelque chose de nouveau qui est différent des sites réalisés au TP n°3)
    9. Pour le choix des couleurs, utilisez une palette de couleur (par exemple https://coolors.co/palettes/trending) pour avoir des couleurs allant ensemble. Vous pouvez également utiliser un mélangeur de couleur (color blender en anglais) pour obtenir un dégradé de couleurs entre deux couleurs https://meyerweb.com/eric/tools/color-blend.
Enfin, votre site doit être léger : pas de grosses images et pas de videos (sauf en lien).

(Vous pouvez regarder le code source pour voir comment est insérée la vidéo)

Vous déposerez sur Moodle à la fin de ce TP obligatoirement une archive de votre site.