https://github.com/matthysdev/tpresponsivehtml
School responsive website project
https://github.com/matthysdev/tpresponsivehtml
css html
Last synced: 11 months ago
JSON representation
School responsive website project
- Host: GitHub
- URL: https://github.com/matthysdev/tpresponsivehtml
- Owner: MatthysDev
- Created: 2021-10-29T21:52:19.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-10-31T08:29:03.000Z (over 4 years ago)
- Last Synced: 2025-07-03T22:42:23.841Z (about 1 year ago)
- Topics: css, html
- Language: HTML
- Homepage:
- Size: 3.06 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 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](https://developer.mozilla.org/fr/docs/Web/CSS/order)
- Pour déclarer les valeurs qui se répètent beaucoup (couleurs, padding, …) dans le projet, vous pouvez utiliser des variables CSS. 🔥🔥 [Documentation](https://developer.mozilla.org/fr/docs/Web/CSS/--*)
- Pour bloquer le ratio d'un media (image, video), il faut utiliser la propriété `object-fit`. [Documentation](https://developer.mozilla.org/fr/docs/Web/CSS/object-fit)
- 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](https://www.drawkit.io/grape-pack) pour son kit d'illustrations.