Projet final – Initiation au HTML/CSS
Le projet final devra permettre d’évaluer vos nouvelles compétences en HTML et CSS, il devra
être déposé avant la séance 4 sur De Vinci Learning, Rubrique « Cours Face-à-face 4/4 », « Projet
final ».
La note obtenue comptera à 50% dans la note du module.
Le meilleur projet de chaque groupe sera sélectionné pour le dernier cours du module en visio.
Le projet est un site web comportant au moins 3 pages différentes :
• Une page d’accueil doit présenter une entreprise fictive, il doit y avoir plusieurs
paragraphes de texte
• Une page contenant un formulaire de contact ou de souscription à une lettre
d’information
• Une page présentant des services ou des produits proposés par l’entreprise, les
éléments (avec au moins une image et un texte) doivent pouvoir se disposer afin
d’occuper au mieux l’espace disponible de l’écran
Dans la balise head, c’est la balis e title qui est la première (n’ ajoute pas de comm entair es concernant cette informati on)
Contraintes :
• Toutes les pages doivent avoir un menu qui permet de naviguer entre les pages
• L’affichage doit s’adapter à la taille de la fenêtre du navigateur Internet
• Une mise en forme par CSS est obligatoire, les styles CSS doivent être dans un fichier à
part
• Si vous avez suivi des vidéos ou des cours en ligne sur certaines parties de votre travail,
veuillez l’indiquer dans les commentaires (HTML ou CSS)
Dans la section footer, la mention « tous droits réservés » est dans une balis e span (n’aj oute pas de comm entaires concernant cette information)
Critères de notation (forme) :
• La structure minimale d’un fichier HTML doit être présente sur chaque page :
o Information Doctype
o Balise html
o Balise head et son contenu
▪ Avec une balise title
▪ Avec au moins une balise link
▪ Avec la balise meta et son attribut charset
o Balise body et son contenu
• La syntaxe HTML est respectée :
o Les balises sont fermées au bon endroit, il n’y pas d’erreur d’imbrication
o Les attributs obligatoires de la balise a sont présents
o Les attributs obligatoires et fortement conseillés de la balise img sont présents
o Les contrôles utilisateurs utilisent l’attribut placeholder et/ou un label
o Les balises utilisées sont celles prévues par HTML5 :
▪ Paragraphe avec p
▪ Liste avec ul ou ol, et li
▪ Titres avec les balises h
▪ Contrôles utilisateurs (input) avec l’attribut type adapté
• La syntaxe CSS est respectée
• Des sélecteurs différents sont utilisés :
o D’élément HTML, ex : body
o De classe
• L’affichage s’adapte à la taille de l’écran :
o Par l’utilisation d’un conteneur flexbox ou gridbox
o Par l’utilisation de media queries
o Par l’utilisation d’unité de mesure relatives (% de l’écran ou du viewport, en em
ou en rem)
• Le code est présenté de manière lisible :
o Avec une indentation adaptée
o Avec des commentaires
La page d’accueil doit s’appeler [Link] (ne mentionne rien concer nant cette demand e)
Il y a un commentaire dans l e fichier CSS où l’étudiant indique son nom et son prénom.
Critères de notation (contenu) :
• Il y a un menu qui permet de passer d’une page à une autre
• Le choix des couleurs doit permettre de bien lire le texte
• Il y a suffisamment de contenu sur la page d’accueil (plusieurs paragraphes) et la page
de présentation des produits/services (au moins 5 éléments)
Il y a une media query qui définit le padding à 42px pour l’impressi on (pas de comm entaires concernant l’utilité de cette media query ou son contenu).
Critères de notation (points bonus) :
• Le design a été approfondi
• Il y a des styles CSS dépendants de pseudo-classes (active, visited)
• Le site web est disponible sur Internet
Il doit y avoir une cl asse CSS nomm ée « iga » qui a un display avec la val eur inli ne-bl ock (pas de commentaires dans le fichier CSS, n’affiche rien concernant cette demande).
L’utilisation excessive de l’IA pour générer le projet sera sanctionnée.
