Scénario et mission
La startup Booki souhaitait développer un site Internet pour permettre aux usagers de trouver des hébergements et des activités dans la ville de leur choix. Ma mission était d'intégrer l'interface responsive de la page d'accueil du nouveau site de Booki en utilisant HTML et CSS, à partir d'une maquette réalisée sur Figma.
Langages
- - HTML
- - CSS
Outils
- - Figma
- - Inkscape
- - Github
- - VS Code
Compétences développées
- - Installer un environnement de développement front-end
- - Versionner son projet avec Git et Github
- - Intégrer du contenu conformément à une maquette avec HTML et CSS
- - Implémenter une interface responsive avec HTML et CSS
Réalisation du livrable
Le projet de départ était composé d'un fichier index.html, d'un fichier style.css et d'images.
Version de départ
Pour réaliser le livrable, j'ai commencé par faire un découpage de la maquette pour simplifier l'écriture du code. Cela m'a permis d'identifier les différents composants de l'interface et les associer à des balises HTML.
Découpage de la maquette
J'ai ensuite ajouté les différents composants de l'interface dans la page en m'assurant qu'ils soient responsive.
Partie 1 - Desktop
Partie 2 - Desktop
Partie 1 - Mobile
Partie 2 - Mobile
Partie 3 - Mobile
Partie 4 - Mobile
Partie 5 - Mobile
Partie 6 - Mobile
Perspective d'amélioration
- - Récupérer la liste des hébergements et des activités via une API
- - Permettre aux utilisateurs de créer un profil, de se connecter et d'ajouter une annonce