HTML/CSS exercise given at HEPL
CSS "League of Legends : Champions" 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.
Lors de vos labos de travaux dirigés (TD), vous allez découvrir le langage CSS et le mettre en pratique via de courts exercices de mise en situation. Les labos de travaux pratiques (TP) vont vous confronter à des exercices pratiques et individuels reprenant la matière vue lors du TD précédent.
À travers cet exercice, vous allez apprendre à maîtriser le positionneent (absolu, relatif, inline-block).
Pour réaliser cet exercice, téléchargez le dossier en cliquant sur le bouton vert code et cliquez sur download zip.
Une fois que vous avez téléchargé le fichier, allez dans votre dossier de téléchargement et dézippez-le. Sur MacOS, il suffit de double cliquer, sur Windows, cliquez droit sur le fichier zip et décompressez via 7zip (extract here).
Démarrez ensuite votre éditeur de code favori (Visual Studio Code ou Sublime Text sur les machines de l'école) et faites glisser le dossier de l'énoncé dans l'éditeur.
Ouvrez Figma afin d'importer la maquette et visualiser le rendu à obtenir. Celui-ci se trouve dans le dossier rendus.
Il y a deux versions du même exercice, commencez d'abord par la version a (index.html) et ensuite passez à la version b (./html/version-b.html) qui en est un dérivé.
Pour cet exercice, vous devez réaliser un import des polices via la propriété @font-face
Pour cet exercice, vous devez utiliser un reset indépendant de votre code. Vous trouverez le code nécessaire à l'adresse suivante : https://meyerweb.com/eric/tools/css/reset/. Pour rappel, les fichiers css doivent se trouver dans un dossier css dédié.
Vous remarquerez que chaque balise HTML dispose d'une ou plusieurs classes. Préférez l'utilisation des classes aux sélecteurs de type (balises) ! Évitez de recopier manuellement les noms de classes et utilisez le copier/coller.
Afin de travailler dans des conditions optimales, pensez à activer la vue adaptative dans votre navigateur. Pour l'activer, ouvrez l'inspecteur dans votre navigateur et cliquez sur l'icône qui représente des périphériques mobiles (le plus souvent un téléphone et une tablette).
Vous êtes invité à personnaliser le contenu du site en choisissant les champions de votre choix. Vous pouvez donc remplacer les textes et informations de présentation ainsi que les images.
N'hésitez pas à vous aider des ressources à votre disposition :
- MDN (Mozilla Developer Network)
- css-steptools
- Pocket Reference
- CSS Cheat Sheet
