5 - "Exo Menu burger CV"

Objectif

Après avoir brillamment réussi votre premier exercice de compteur de clicks en JavaScript, vous voilà fin prêt à relever votre deuxième défi. Et pour celui-ci, nous n'allons pas chercher bien loin.

Vous souvenez-vous du CV que vous avez réalisé en HTML et CSS ? Je suis sûr que oui, ahaha ! Eh bien, vous allez ajouter une petite touche de JavaScript pour rendre tout cela un peu plus dynamique. Voici votre mission :

À l'aide du cours, ajoutez un menu burger à votre CV. Au clic sur le bouton, une fenêtre s'ouvre avec les liens de navigation redirigeant vers les différentes sections de la page, ainsi qu'un bouton pour refermer cette fenêtre.

Lien vers les maquettes: https://codephenix.fr/interface/cours/exercices/1-3-2-initiation-js.gif

Cours associés

Javascript / 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
[x] Le click sur le bouton est fonctionnel et permet d’ouvrir une fenêtre
[x] Le click sur le bouton fermer est fonctionnel et permet de fermer la fenêtre
[x] Les liens de navigations sont présents et fonctionnels
[x] Aucun bugs de fonctionnement sur l’affichage

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
[x] 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
[x] 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)
[x] CSS: Tous les élements cliquables (liens, boutons, autres) ont un cursor de type pointer
[x] CSS: Les class, id et autres attributs ont des noms respectables et porteurs de sens (pas de aa ou toto ou texte2)
[x] JS: Le code est commenté
[x] JS: Pas d'erreur ni de logs inutiles dans la console
[x] 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
[x] CSS: Les couleurs principales du site sont renseignées dans des variables CSS (ex: color: var(--main-blue))
[x] 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"
[x] 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.

[ ] ...

CodePhenix / formation-phenix