Vous trouverez ici les instructions pour réaliser votre défi.
Ce défi a pour philosophie de vous sensibilier aux enjeux des performances lors de la création d'un site Internet. En novembre dernier, Google annonçait une importante mise-à-jour de son algorithme de ranking, le Page Experience Update : https://developers.google.com/search/blog/2020/11/timing-for-page-experience?hl=fr Dans sa démarche d’offrir un “meilleur Web” et des expériences toujours plus riches et centrées sur l’utilisateur, Google a intégré de nouveaux éléments qui influencent le référencement. Ces signaux portent sur la rapidité de chargement d’une page, la réactivité et la stabilité visuelle. Ils portent le nom de Web Core Vitals et seront pris en compte dans l’algorithme de Google en Juin 2021.
L'objectif du défi est d'intégrer la maquette du CV, et que la page HTML affiche le meilleur score possible sur l'outil Lighthouse : https://developers.google.com/web/tools/lighthouse Plusieurs critères seront appréciés :
- Fidélité du rendu
- Performances de la page
- Techniques utilisées
- Qualité du code
N'oubliez pas de soigner la version mobile ET desktop, plus de 80% des utilisateurs sont sur des dispositifs mobiles de nos jours.
Source de la maquette de la page La maquette est disponible sur l'outil Figma à l'adresse : https://www.figma.com/file/GJCtUYJz0YAdadAywi9t9S
Création du projet sur Github Prérequis : vous devez avoir un compte sur Github, il vous sera très utile tout au long de votre formation et de votre carrière.
- Allez sur la page du projet : https://github.com/Sarimarcus/defi-onlineformapro
- Cliquez en haut à droite sur 'Fork' pour en créez une copie sur votre compte
- Choisissez votre profil, et confirmez
- A vous de coder !
N'oubliez pas de partager ce projet avec les membres de votre équipe, un seul projet Github par équipe s'il vous plait, vous apprendrez du coup à travailler en collaboratif.
Langages, librairies, frameworks utilisables... Il n'y a aucune exigence quant au choix des technos à utiliser, mais gardez à l'esprit que le code doit être :
- Intelligibile
- Organisé
- Maintenable
- Commenté
Faites-vous plaisir !
- La bible sur les Web Vitals : https://web.dev/learn-web-vitals/, vous y trouverez tout le nécessaire pour mener à bien ce défi.
- La page officielle Lighthouse : https://developers.google.com/web/tools/lighthouse, vous pouvez aussi directement lancer les test depuis la console de votre navigateur.
A vos claviers !
PS : Je reste bien entendu disponible sur le chat : https://chat.accesscodeschool.fr/ pour n'importe quelle doute ou question.