Le Littoral
- Restaurant Le Littoral Visiter le site
- Github Accéder au code
- Technologies HTML / CSS / JAVASCRIPT
Description et contexte :
Le Littoral est un site fictif, one page, de présentation d’un restaurant. J’ai créé ce site pour mettre en pratique mes compétences et apprendre de nouvelles choses.
Objectif :
Découper et intégrer une maquette responsive, d’une page, réalisée sous Photoshop, répondre aux exigences d’UX/UI/référencement et le niveau d’accessibilité amélioré (AA). Le code doit être propre, commenté, évolutif et réutilisable.
Travaux réalisés :
- Découper la maquette
- Intégrer les éléments avec HTML et CSS / SASS (structure BEM)
- Intégrer des animations avec CSS pour une expérience utilisateur réussie
- Intégrer du contenu dynamique avec JAVASCRIPT native
- Intégrer la bibliothèque JavaScript Animate On Scroll pour les animations
- Installer les dépendances Postcss, Postcss-CLI, autoprefixer pour la compatibilité des navigateurs
- Implémenter les éléments en respectant les règles d’accessibilité WCAG avec ARIA
- Minifier les fichiers CSS
- Réécrire les URL (URL Rewriting)
- Tester et optimiser le site web dans le cadre d’une démarche d’optimisation continue de performances (optimisation sémantique, temps de chargement, balise meta, poids des images maillages internes, lazy loading, caches …)
Résultats :
Le temps de chargement est rapide (Time to interactive : 0.7s) avec une navigation fluide, intuitive et animé. J’ai respecté les normes de référencement technique (SEO on-page) et les standards d’accessibilité du WCAG. Le site est responsif, compatible avec les différents navigateurs modernes et validé par le service de validation de balisage du W3C Nu Html Checker.
Résultat de test Lighthouse:
Concernant l’accessibilité le site ne répond pas aux critères de succès 1.4.3 de WCAG (contraste minimum) afin de respecter la couleur de la maquette.
J’ai également effectué des tests avec le lecteur d’écran NVDA et le validateur d’accessibilité AChecker Web Accessibility Checker (niveau AA) pour m’assurer qu’il y’a pas de problèmes majeurs. Le résultat des tests a été concluant.
L’utilisation du préprocesseur SASS m’a permis d’avoir un code propre, évolutif et réutilisable. Au début du projet j’avais quelques difficultés pour organiser mon code mais j’ai pu remédier à ça grâce à cet article très intéressant : sass guidelines.
La création de ce site web m’a permis d’être autonome, de renforcer mes compétences en SASS et JAVASCRIPT ainsi que l’optimisation des performances et l’accessibilité web. J’ai aussi développé ma capacité à chercher des informations pertinentes afin de trouver des solutions aux difficultés rencontrées.