Skip to content

Files

Latest commit

 

History

History
74 lines (49 loc) · 3.13 KB

etape2.md

File metadata and controls

74 lines (49 loc) · 3.13 KB

Etape 2 - Entraînez-vous en mettant en forme votre CV

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

Contexte

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

Avant de commencer

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

Ta mission

  1. Si tu ne l'as pas encore fait, crée une nouvelle branche nommée mon-cv-css.
  2. 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 et rem ;
    • 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 ;
    • 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.
  3. Test ta page avec Wave et corrige les erreurs.
    • Assure-toi que tous les textes sont lisibles et ont un bon contraste.

Liste de vérification

✅ 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.