Contenu du cours
Projet Fil Rouge : Plateforme de Location de Gîtes
Objectif global : Concevoir une plateforme de réservation de gîtes en ligne en appliquant les notions théoriques et pratiques acquises tout au long de la formation.
0/4
Charte Graphique, Gamme Colorimétrique et Maquettage sur Figma
Objectifs : Comprendre l’importance de la charte graphique dans la cohérence visuelle d’un projet. Apprendre à définir une gamme colorimétrique adaptée à un projet web. Découvrir les bases du maquettage et utiliser Figma pour concevoir des interfaces.
0/6
Réalisation de la Maquette en HTML5 et CSS3 (Responsive)
Objectifs de la leçon : Convertir une maquette conçue sous Figma en code HTML5 et CSS3. Appliquer les principes de responsive design pour que la maquette soit adaptée aux écrans desktop, tablette, et mobile. Exercice Pratique : Réalisation de la Maquette en HTML5 et CSS3 (Responsive) Objectif : Mettre en pratique les compétences HTML5 et CSS3 pour réaliser une page d’accueil responsive pour la plateforme Gîtes et Nature et valider sa qualité avec des outils d’analyse. Consignes : Structure HTML : Créez une page d’accueil index.html avec les sections suivantes : Header : Logo et menu de navigation. Hero Section : Titre et description de la plateforme. Liste des gîtes : Cartes affichant des images, titres, et boutons de réservation. Footer : Mentions légales et copyright. Mise en page CSS : Stylisez votre page avec un fichier styles.css. Assurez une présentation professionnelle avec : Couleurs issues de la gamme colorimétrique définie dans la charte graphique. Une disposition claire et harmonieuse des éléments. Responsive Design : Ajoutez des media queries pour que la page s’adapte : Desktop (1440px) : Menu horizontal, liste des gîtes en grille. Mobile (375px) : Menu vertical, liste des gîtes en une seule colonne. Tests de validation : Test HTML5 (W3C Validator) : Accédez au site Validator W3C. Chargez votre fichier index.html pour vérifier qu'il respecte les standards HTML5. Corrigez toutes les erreurs signalées. Test CSS3 (W3C Validator) : Accédez au site CSS Validator W3C. Chargez votre fichier styles.css pour vérifier sa conformité aux standards CSS. Corrigez les éventuelles erreurs. Analyse de performance : Google PageSpeed Insights : Rendez-vous sur PageSpeed Insights. Entrez l’URL de votre projet si hébergé en ligne, ou utilisez l’outil Lighthouse sur votre navigateur local. Analysez les résultats pour mobile et desktop, et appliquez les suggestions pour améliorer les performances. Rendu attendu : Une page d’accueil responsive avec les éléments suivants : Navigation fluide. Mise en page responsive adaptée pour toutes les tailles d’écran. Code validé par les outils W3C. Performances évaluées par Google PageSpeed Insights. Critères d’évaluation : Structure HTML et CSS : Respect des standards HTML5 et CSS3 validés par les tests W3C. Responsive Design : Mise en page fluide et bien adaptée aux différentes tailles d’écran. Performance : Score supérieur à 80 sur Google PageSpeed Insights (mobile et desktop).
0/1
Ajout de JavaScript – Cas Pratique – Interaction Dynamique
Nous allons enrichir la page Gîtes et Nature avec une fonctionnalité interactive : un système de recherche dynamique permettant de filtrer les gîtes en fonction du nom ou de la capacité.
0/1
Protégé : Développeur Web et Web Mobile (DWWM) – RNCP 37674 | Module 1 : Développer la Partie Front-End d’une Application Web ou Web Mobile Sécurisée
À propos de la leçon

Objectif :

Créer une barre de recherche permettant aux utilisateurs de filtrer dynamiquement les gîtes affichés sur la page Gîtes et Nature.

Contexte :

La page Gîtes et Nature contient une liste de gîtes sous forme de cartes (cards). Vous allez ajouter une barre de recherche qui permettra aux utilisateurs de saisir un mot-clé et de filtrer les gîtes en fonction de leur nom.

 

  1.  
0% Terminer
Retour en haut