Pour t'entraîner, réalise cet exercice étape par étape.
Une fois que tu as terminé, tu peux comparer, auto-évaluer, ton travail avec la Check-list
Vous cherchez du travail et vous avez créé votre CV en ligne en y ajoutant les informations de votre parcours professionnel. Cependant, pour que votre CV attire l’œil des recruteurs, une mise en forme impeccable est nécessaire.
Pour cela, vous allez devoir enrichir votre page HTML avec du CSS.
Pour t'aider, tu peux t'inspirer de cet exemple de CV avec CSS
Suis les cours Treehouse suivants (tu peux aussi faire l'exercice en parallèle) :
Alternative : Fais les 6 chapitres de la de la Partie 2 - Mettez en forme vos pages web avec CSS3
- Si tu ne l'as pas encore fait, crée une nouvelle branche nommée
mon-cv-css
. - Crée un fichier
main.css
et ajoute les styles CSS suivants :- Modifie la couleur d'un texte ;
- Modifier la taille de 3-5 textes en utilisant les unités
px
,em
etrem
; - Ajoute une marge intérieure au
header
de ton CV ; - Ajoute une marge extérieure au
footer
de ton CV ; - Change l'alignement d'un texte ;
- Applique une image de fond à la page ;
- Utilise une police personnalisée avec @font-face ;
- Pour gagner du temps, utilise cet outil Google Webfonts Helper
- Ajoute un effet de survol (soulignement, changement de couleur, ...) aux liens de ton menu de navigation ;
- Définis la bordure d'un élément ;
- Ajoute une ombre à un élément.
- Ajouter une largeur maximale à la page, par exemple
800px;
- Centre horizontalement le contenu de la page.
- Test ta page avec Wave et corrige les erreurs.
- Assure-toi que tous les textes sont lisibles et ont un bon contraste.
✅ Tu as un fichier .html
et un fichier .css
.
✅ Ton fichier .css
est bien rangé dans un dossier css/
.
✅ La couleur d'un texte a été modifiée.
✅ L'alignement d'un texte a été modifié.
✅ La taille d'un texte a été modifiée avec une valeur en px
.
✅ La taille d'un texte a été modifiée avec une valeur en em
.
✅ La taille d'un texte a été modifiée avec une valeur en rem
.
✅ Une image de fond a été appliquée à la page.
✅ Une police personnalisée a été utilisée avec @font-face
.
✅ Un effet de survol a été ajouté aux liens du menu de navigation.
✅ La bordure d'un élément a été définie.
✅ Une ombre a été ajoutée à un élément.
✅ Une largeur maximale a été ajoutée à la page.
✅ Le contenu de la page est centré horizontalement.