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 : Maîtriser la création de pages web statiques, accessibles et responsives pour structurer la plateforme.

  • Durée : 80 heures
  • Contenu :
    • Gestion de projet : Comprendre les étapes fondamentales de la gestion d’un projet web, de l’expression des besoins à la rédaction d’un cahier des charges.
    • HTML5 et CSS3 : structure et mise en page des pages principales.
    • Responsive design avec flexbox et grid ou Boostrapp 5.
    • Maquettage des interfaces utilisateur avec des outils comme Figma.
  • Projet lié :
    • Rédaction du cahier des charges
    • Création de la page d’accueil avec une liste de gîtes.
    • Conception de la page de détails d’un gîte (photos, description, prix).
  • Livrables :
    • Cahier des charges 
    • Pages statiques fonctionnelles et responsives.
0% Terminer
Retour en haut