Projet 2 - Transformez une maquette en site web avec HTML & CSS

• ANNEXE - Ressources projets

  🖌️ Maquette figma

  ---

  💻 Github projet

---

⏳ Timing

Date début : 22/08/2023

Date de fin : 27/08/2023

Date de fin réel : 27/08/2023

---

🎯 Objectifs :

Objectifs :

• Tenir le planning pour la réalisation du projet: OK

---

📑 Etapes :

• Étape n° 1 : Mettez en place votre environnement de développement
• Étape n°2 : Découpez votre maquette
• Étape n° 3 : Intégrez le header du projet
• Étape n° 4 : Ajoutez le formulaire de recherche
• Étape n° 5 : Ajout de la partie Filtres
• Étape n° 6 : Réalisez la “card” présente dans “Hébergement à Marseille”
• Étape n° 7 : Gérez l’affichage des “cards” du conteneur “Hébergement à Marseille”
• Étape n° 8 : Intégrez le conteneur “Activités à Marseille”
• Étape n° 9 : Implémentez le footer
• Étape n° 10 : Mettez en place le responsive design
• Étape n° 11 : Vérifiez la qualité de votre code

---

🤔 Conclusion :

Problèmes rencontrés :

• Avoir les bonnes dimensions du logo avec le réglage du padding et du container parent.
• L'ajout du formulaire de recherche avec la partie responsive.
• La disposition des cards avec les flexbox, la solution utilisé flex: 1 0 25%. Ca combine plusieurs flex property.

Point négatif 👎

• Je n'ai pas rencontré de point négatif.

Point positif 👍

• Permet mettre en pratique dans un cas concret la transformation d'une maquette en vrai site HTML/CSS.
• J'ai approfondi des notions avec flex, et l'uilisation des gap très pratiques pour l'espacement des container en responsive.
• J'ai découvert également l'interpretation d'une maquette sur figma pour récupérer les couleurs, et les mesures de chaque éléments.

---