CSS exercise given at HEPL
CSS "Modda" is an educational project, which will be used for HTML/CSS courses.
Note: the school where the course is given, the HEPL from Liège, Belgium, is a french-speaking school. From this point, the instruction will be in french. Sorry.
Vous trouverez dans ce dossier une page HTML nommée index.html. Cette page est tirée d'un template disponibleici.
Le rendu final désiré est le suivant : 
- Créez et liez le fichier styles.css à la page index.html.
- Utilisez un reset, celui d'Eric Meyer par exemple.
- En vous fiant aux rendus attendus du fichier Adobe XD, complétez la feuille de styles.
- Toutes les images à utiliser se trouvent dans le dossier img.
- Bon travail et bon amusement !
Dans un dossier css, créez le fichier reset.css
- Se rendre sur https://fonts.google.com/ et sélectionner les polices
- Merriweather
- Light 300
- Light 300 Italic
- Raleway
- Light 300
- Medium 500
- Bold 700
- Merriweather
Dans la partie Use on the Web, copiez-collez ensuite le code contenu entre les deux balises <style>...</style> du @import tout en haut de votre fichier reset.css.
Ensuite, rendez-vous sur le site d'Eric Meyer pour copier-coller le code juste après les lignes d'importation des polices : https://meyerweb.com/eric/tools/css/reset/.
Une fois que vous avez récupéré les polices et le reset (dans cet ordre), vous pouvez ouvrir le fichier Adobe XD et analyser le contenu.
Vous remarquerez que le contenu est dans la famille de police Merriweather titres et les liens dans la police Raleway.
Vous pouvez donc cibler les éléments HTML et appliquer le css correspondant.
- Comment masquer un élément visuellement ?
- Comment importer une typo avec @font-face ?
- Comment utiliser adobe XD ?
- En attendant, si vous avez besoin d'aide pour utiliser Adobe XD, vous pouvez chercher des solutions dans la documentation officielle ou me poser des questions sur Slack.
Adaptation et intégration par François Parmentier.