Il s'agit d'un exercice que j'ai produit dans le cadre de mon activité de formateur en développement web. L'objectif étant pour les apprenants de réaliser un front basique où il travailleront le positionnement de cartes et la mise en forme. Ils apprennent notamment à baliser une page et utiliser différentes méthodes de positionnement. Exercice également accessible à :
https://skillcode.fr/exercice-css-projets-finaux/
L'exercice est donné pendant les toutes premières semaines de formation du fait de sa simplicité. Au travers de cet exercice, les étudiants apprennent à :
- Démarrer un projet web sans back-end
- Charger un fichier CSS dans un fichier HTML
- Utiliser les principales balises HTML
- Utiliser la sémentique adéquate
- Structurer une page de manière cohérente
- Appliquer des styles de base (couleurs, polices, backgrounds, tailles)
- Positionner les éléments grâce au display ou à flexbox
Il est maintenant temps de mettre en pratique tout ce que vous avez appris jusque là. Pour ce faire vous allez réaliser un grand classique des tests de devs : la todo list ! Concrètement il s'agit de réaliser une page web qui contiendra vos tâches à réaliser.
Pour cet exercice vous rendrez :
-
un fichier html
-
un fichier css
-
au moins une image
Vous êtes libre de réaliser cet exercice comme vous le souhaitez, tant que vous respectez un certain nombre de conditions, on trouvera sur votre page :
-
un header stylisé avec un titre de premier niveau
-
une partie dédiée au contenu principal, autrement-dit vos tâches à faire. Cette partie ce décomposera en deux semaines distinctes comportant chacune au moins 2 projets.
-
Les projets seront représentés sous la forme de cartes alignées et centrées sur la page. Chaque projet aura un titre, un état (terminé ou en cours par exemple) symbolisé par un code couleur et une liste de toutes les tâches composant le projet.
-
les tâches des projets dans l'état terminé seront toutes barrées
-
un footer dans lequel on trouvera une image de votre choix entourée par du texte. Vous pouvez par exemple mettre votre photo avec une courte biographie.
-
vous utiliserez les différentes propriétés vues jusqu'à présent pour styliser votre page (couleurs, bordures, ombres...)
N'oubliez surtout pas de commenter votre code !
Pour aller plus loin vous pouvez essayer d'intégrer des icônes à votre site, ils rendent l'expérience utilisateur plus agréable. Je vous laisse faire vos recherches, il y a de nombreux sites sur internet qui proposent d'intégrer ce service sur vos pages.
Voici ce à quoi pourrait ressembler une partie du résultat (bien entendu, il n'y a pas de bonne réponse, ceci n'est qu'une version possible pour vous aiguiller) :
