Fontenay Immobilier
- Fontenay Immobilier Visiter le site
- GitHub Accéder au code
- Technologies HTML / CSS / JAVASCRIPT
Description et contexte :
Fontenay Immobilier est un site fictif de vente d’appartements et de maisons dans quelques grandes villes : Paris, New-York, Londres, Amsterdam, Québec. J’ai créé ce site pour mettre en pratique mes compétences en développement front end.
Objectif :
Découper et intégrer une maquette responsive, de plusieurs pages, 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 le contenu dynamique avec JAVASCRIPT native
- 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
- Intégrer la bibliothèque JavaScript Swiper pour les carrousels
- Réécrire les URL (URL Rewriting)
- Minifier les fichiers CSS
- 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.9s) 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 :
L’accessibilité n’est jamais à 100% mêmes si les résultats sont à 100%. J’ai consulté plusieurs ressources pour garantir une plus large accessibilité. 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.
La réalisation de ce site web m’a permis d’être autonome et de renforcer mes compétences avec les technologies utilisées. Ce projet m’a permis, encore, de mieux optimiser les performances d’ un site web et de le rendre accessible au plus grand nombre d’utilisateurs. J’ai développé ma capacité à chercher les informations dont j’ai besoin, de trouver des solutions aux difficultés rencontrées et d’être persévérant quelles que soient les taches à effectuer.