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) :
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) ;
Avoir un site fait exclusivement en CSS et HTML en suivant les recommandations d'écriture de ce module et du W3C ;
Avoir un code clair et simple (utiliser correctement la hiérarchie au niveau du CSS) ;
Avoir un tableau habillé (en CSS) ;
Avoir un menu (sans javascript) (en CSS) ;
Avoir un formulaire habillé (Ne pas faire la page action du formulaire en charge de le traiter) ;
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🥳🥳🥳🎉🎉🎉...
Ê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)
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.