0 - "CV HTML Exercice"

[SofienM]

Objectif

Après cette première semaine d'introduction au cours HTML, je suis sûre que vous avez hâte de mettre vos connaissances en œuvre et de créer votre première page web.

Quoi de mieux qu'un exercice pratique pour concrétiser tout cela ?

Pour ce premier exercice, vous allez reproduire un CV selon la maquette fournie dans le cours.

Allez, on avance, let's gooo !

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

Cours associés

HTML / 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.

• [ ] La maquette est bien reproduite (pixel perfect)
• [ ] Utilisation des balises de structures (h1 … hn)
• [ ] Utilisation des balises listes (ul, ol, li)

Code quality:

• [ ] HTML: 0 erreurs/warnings selon les standards du W3C
• [ ] HTML: Les textes visibles ne comportent pas de fautes d'orthographe
• [ ] HTML: Les textes visibles commencent tous par une majuscule
• [ ] HTML: La langue du document est renseignée
• [ ] HTML - SEO: title, description et favicon ont été renseignés
• [ ] 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
• [ ] CSS: Aucun padding ni margin supérieur à 50px sauf exception dûment documentée
• [ ] 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.

• [ ] ...