Project #2: Web Developer Training OpenClassrooms
- Project Description
- Technologies
- Assessed Skills
- Fictional Scenario
- Mockups
- Getting Started
- Built with
- Author
This project involves transforming design mockups into a web page using HTML and CSS for Booki, a company offering vacation planning tools. The site allows users to find accommodations and activities in their chosen city, with the option to filter by themes such as budget or ambiance.
- HTML5
- CSS
- 🎨 Integrating content according to a mockup
- 📱 Implementing a responsive interface
- 💻 Setting up Front-End environment
Loïc, UI Designer at Booki, has created a new design for the site mockup based on Material Design.
Before definitively approving the design, the company decided to create a prototype.
This is my first internship as a web developer, and Sarah, the CTO, entrusts me with the task of creating this prototype by integrating desktop and mobile mockups in HTML and CSS.
- Examine the provided design mockups for desktop and mobile versions.
- Use HTML and CSS to integrate the mockups into a functional prototype.
- Pay attention to design specifications, functional requirements, and technical constraints provided by the team.
- Users can search for accommodations in their chosen city using an editable search field (no functionality required).
- Each accommodation or activity card should be clickable in its entirety.
- Filter buttons should change appearance on hover (no functionality required).
- "Accommodations" and "Activities" in the header are clickable links leading to specific sections.
- Two mockups: desktop and mobile. Adapt the site also for tablets.
- Breakpoints at 992px and 768px.
- Desktop-first approach, followed by tablets and phones using Media Queries.
- Optimize images for resolution and loading time.
- Use Font Awesome for icons via CDN.
- Colors: #0065FC (blue), #DEEBFF (light blue), #F2F2F2 (gray).
- Font: Raleway from Google Fonts.
- Use pixels and percentages, prefer Flexbox over Grid.
- Avoid CSS frameworks or preprocessors.
- Use semantic HTML tags.
- Ensure W3C HTML and CSS validation.
- Test compatibility with the latest versions of Google Chrome and Mozilla Firefox.
Projet n°2 : Formation Développeur Web OpenClassrooms
- Description du Projet
- Technologies
- Compétences Évaluées
- Scénario Fictif
- Maquettes
- Pour Commencer
- Développé Avec
- Auteur
Ce projet consiste à transformer des maquettes de design en une page web à l'aide d'HTML et de CSS pour Booki, une entreprise proposant des outils de planification de vacances. Le site permet aux utilisateurs de trouver des hébergements et des activités dans leur ville choisie, avec la possibilité de filtrer par thèmes tels que le budget ou l'ambiance.
- HTML5
- CSS
- 🎨 Intégrer du contenu conformément à une maquette
- 📱 Implémenter une interface responsive
- 💻 Mettre en place son environnement Front-End
Loïc, Designer UI chez Booki, a réalisé un nouveau design de la maquette du site basé sur le Material Design.
Avant de valider définitivement le design, l’entreprise a décidé de réaliser un prototype.
C'est mon premier stage en tant que développeuse web et Sarah, la CTO me confie la tâche de créer ce prototype en intégrant les maquettes desktop et mobile en HTML et CSS.
- Examiner les maquettes de design fournies pour les versions bureau et mobile.
- Utiliser HTML et CSS pour intégrer les maquettes dans un prototype fonctionnel.
- Faire attention aux spécifications de design, aux exigences fonctionnelles et aux contraintes techniques fournies par l'équipe.
- Les utilisateurs peuvent rechercher des hébergements dans leur ville choisie à l'aide d'un champ de recherche éditable (aucune fonctionnalité requise).
- Chaque carte d'hébergement ou d'activité doit être cliquable dans son intégralité.
- Les boutons de filtre doivent changer d'apparence au survol (aucune fonctionnalité requise).
- "Hébergements" et "Activités" dans l'en-tête sont des liens cliquables conduisant respectivement à des sections spécifiques.
- Deux maquettes : bureau et mobile. Adapter le site également pour les tablettes.
- Points de rupture à 992px et 768px.
- Approche bureau d'abord, suivie des tablettes et des téléphones à l'aide des Media Queries.
- Optimiser les images pour la résolution et le temps de chargement.
- Utiliser Font Awesome pour les icônes via CDN.
- Couleurs : #0065FC (bleu), #DEEBFF (bleu clair), #F2F2F2 (gris).
- Police : Raleway de Google Fonts.
- Utiliser des pixels et des pourcentages, préférer Flexbox à Grid.
- Éviter les frameworks ou préprocesseurs CSS.
- Utiliser des balises HTML sémantiques.
- Assurer la validation W3C HTML et CSS.
- Tester la compatibilité avec les dernières versions de Google Chrome et Mozilla Firefox.