MatthysDev / tpResponsiveHtml

School responsive website project

TP Final (et noté)

Vous allez intégrer la maquette et ses déclinaisons responsives qui se trouvent dans le dossier maquettes N'oubliez pas d'appeler le fichier reboot.css pour pouvoir avoir des styles propres dès le départ.

Comment me rendre votre travail ?

Un zip par mail à bonjour[at]davidpollet . fr. À rendre pour le 01 novembre (2020). Votre zip doit être nommé classe_nom-prenom.zip (ex: app_doe-john.zip)

⚠️⚠️ Vos pages doivent être en HTML sinon, je ne corrige pas. Vous pouvez travailler en php si vous le souhaitez pour profiter des include mais dans ce cas, faites un copié/coller du html généré dans un fichier HTML.⚠️⚠️

Astuces utiles

• On peut changer l'ordre d'un élément grâce à la propriété order si son parent est en display: flex ou display: grid. Documentation
• Pour déclarer les valeurs qui se répètent beaucoup (couleurs, padding, …) dans le projet, vous pouvez utiliser des variables CSS. 🔥🔥 Documentation
• Pour bloquer le ratio d'un media (image, video), il faut utiliser la propriété object-fit. Documentation
• Pour insérer les icônes et images SVG, vous avez deux cas de figure :
  • Dans une balise img mais vous ne pourrez pas changer la couleur
  • Copié / collé du code svg dans votre page, ou un include si vous travaillez en php. Dans ce cas, vous pourrez selectionnez le svg et changer sa couleur.

Barême de notation

• 15 points pour l'intégration
• 5 points pour la qualité du code. La qualité du code inlut le choix des bonnes balises HTML et la lisibilité de votre code.

Crédits

Un grand merci à DrawKit pour son kit d'illustrations.