1 - "CV CSS Exercice"

[SofienM]

Objectif

Maintenant que vous avez acquis les bases du HTML, avec l'imbrication de balises, la structuration de votre page et l'ajout de titres et de paragraphes, il est temps de rendre tout cela un peu plus esthétique, un peu plus joli, avec des couleurs et du style ! En d'autres termes, vous allez vous occuper de l'apparence de votre HTML.

Pour cela, vous avez découvert le CSS. Pour rappel, son rôle est uniquement de s'occuper de l'apparence d'un site. Et devinez quoi ? Nous allons nous exercer un peu avec du CSS, héhé !

Votre objectif est de mettre en forme le CV de l'exercice précédent selon la maquette ci-dessous. Amusez-vous bien ! 😄

Lien vers les maquettes: https://codephenix.fr/interface/cours/exercices/1-2-1-initiation-css.png

Cours associés

CSS / Initiation

Definition of Done

Une tache est considérée comme complétée lorsque chacune des sous-taches de cette section ont été complétées.

• [x] La maquette est bien reproduite (pixel perfect)
• [x] Utilisation de bon sélecteur css
• [x] Respect pris en compte de l'héritage en CSS

Code quality:

• [x] HTML: 0 erreurs/warnings selon les standards du W3C
• [x] HTML: Les textes visibles ne comportent pas de fautes d'orthographe
• [x] HTML: Les textes visibles commencent tous par une majuscule
• [x] HTML: La langue du document est renseignée
• [ ] HTML - SEO: title, description et favicon ont été renseignés
• [x] HTML - SEO: Si c'est pertinent, les balises sémantiques
  ,

  ,

  ,

  ,

  ont été utilisées
• [ ] CSS: Aucun padding ni margin négatif sauf exception dûment documentée
• [x] CSS: Aucun padding ni margin supérieur à 50px sauf exception dûment documentée
• [x] CSS: Le css comporte un "reset CSS" (cf plus bas)
• [ ] CSS: Tous les élements cliquables (liens, boutons, autres) ont un cursor de type pointer
• [ ] CSS: Les class, id et autres attributs ont des noms respectables et porteurs de sens (pas de aa ou toto ou texte2)
• [ ] JS: Le code est commenté
• [ ] JS: Pas d'erreur ni de logs inutiles dans la console
• [ ] JS: Les variables ont des noms respectables et porteurs de sens

Code quality ++ (Bonus)

• [ ] HTML - SEO: Description et preview image pour Facebook, Linkedin et Twitter sont renseignées
• [ ] CSS: Les couleurs principales du site sont renseignées dans des variables CSS (ex: color: var(--main-blue))
• [ ] CSS: Les noms de class et id sont en "hyphens-case" c'est à dire avec des tirets. Bon ex: "btn-submit", mauvais "btnSubmit" ou "btn_submit"
• [ ] JS: Les noms de variables sont en "camel-case" c'est à dire avec des majuscules. Bon ex: "btnSubmit", mauvais "btn_submit"

NB: Reset CSS de Codephenix

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: inherit;
}
li {
  list-style-type: none;
}

Bonnes pratiques de communication

Vous êtes en phase d'apprentissage et s'il est crucial que vous développiez votre autonomie en essayant et en cherchant par vous même il est tout de même courant pour un développeur de demander de l'aide. Pour cela voici un petit florilège des phrases/choses à éviter:

• dire "Ca marche pas" sans expliquer précisément ce qui ne marche pas
• "J'comprends pas" sans donner de contexte
• "... du coup j'ai tout supprimé et j'ai tout recommencé"
• "J'ai dit à l'ordi de le faire mais il ne le fait pas"
• dire "JAVA" au lieu de "Javascript": ca n'a rien à voir !!!!!!!!!!!

Q&A

Cette section sera complétée par votre formateur lors de la review des taches.

• [ ] ...