Dans cette étape vous allez créer des styles communs assurant une cohérence visuelle parmi toutes vos pages. Ces style devront donc allez dans le fichier main.css.

Requis

  1. Choisissez une palette de 5 couleurs se complétant bien. Ces couleurs seront utilisées pour styliser la majorité des éléments sur votre site. Prévoyez que certaines de ces couleurs seront utilisées presque exclusivement afin de créer des effets de survole. Il est donc possible que ces couleurs ne soient qu'une variation d'une autre couleur déjà présente sur votre palette.

    Les couleurs blanc #ffffff ⚪️ et noir pur #000000 ⚫️ ne doivent pas être inclues dans votre palette puisqu'il est pris pour acquis qu'elles seront probablement utilisée à un certain point.

    Pour vous inspirez, vous pouvez consulté le site Coolors.co.

    Par exemple, voici la palette de couleur pour Gorillaz.

  2. Créez des variables CSS pour chacune de ces couleurs dans le fichier main.css. En tout temps, vous devrez utiliser ces variables CSS plutôt que le code HEX de ces couleurs dans vos feuilles de styles. Ainsi, si un changement de couleur a lieu en cours de projet, il sera possible d'effectuer le changement à un seul endroit en ayant l'assurance qu'il impactera l'ensemble du site.

  3. Choisissez deux polices de style pour votre site. Au moins une de ces polices doit provenir de Google Fonts. Pour vous inspirez, vous pouvez consulté le site Canva.com.

    • Une plus sobre destiné au texte régulier de votre site. La qualité principale de cette police doit-être sa lisibilité.

    • Une plus stylisée destiné aux éléments plus "punchés", tels que les titres.

  4. Créez des variables CSS pour chacune de ces polices dans le fichier main.css. En tout temps, vous devrez utiliser ces variables CSS plutôt que le nom direct de ces polices dans vos feuilles de styles. Ainsi, si un changement de police a lieu en cours de projet, il sera possible d'effectuer le changement à un seul endroit en ayant l'assurance qu'il impactera l'ensemble du site.

  5. Déterminez la taille de votre texte régulier. Par défaut, le texte régulier des navigateurs à une taille de 16px. Choisissez donc une taille entre 14px et 20px pour celui-ci selon ce qui fonctionne le mieux avec votre police de texte régulier et attribuez cette taille et la police de texte régulier à votre balise body dans votre fichier main.css.

  6. Choisissez la taille des titres de niveau 1, 2 et 3 (h1, h2 et h3). Ceux-ci devront logiquement être plus grand que votre texte régulier. Créez ensuite les classes title-1, title-2 et title-3, attribuez leur la taille que vous avez déterminé, la police souhaitée, ainsi que la couleur appropriée dans votre fichier main.css.

    De la sorte, tous les membres de votre équipe pourront utiliser ces classes afin d'établir une cohérence visuelle forte entre les pages.

Notes de cours 📚