Webmaster Intermédiaire - HTML5/CSS3 + Responsive Web Design (RWD)
Besoin d’adapter cette formation à vos besoins ?
N’hésitez pas à nous contacter afin d’obtenir un devis sur mesure !
Formation créée le 15/03/2024. Dernière mise à jour le 18/03/2024.
Version du programme : 1
Programme de la formation
Objectif de formation : La formation vise à fournir aux participants les connaissances et compétences nécessaires pour concevoir et développer des sites web modernes et réactifs en utilisant HTML5, CSS3 et les principes du Responsive Web Design (RWD).
Objectifs de la formation
- Utiliser les balises sémantiques de HTML5 pour structurer le contenu web de manière efficace
- Appliquer des styles avancés et des effets visuels avec CSS3 pour améliorer l'esthétique des sites web
- Concevoir des sites web réactifs en utilisant des techniques de Responsive Web Design, y compris les media queries et les images fluides
- Optimiser les performances des sites web en réduisant la taille des fichiers et en utilisant des techniques de chargement asynchrone
- Appliquer les principes de l'accessibilité web pour rendre les sites web utilisables par tous les utilisateurs, y compris ceux ayant des besoins spécifiques
Profil des bénéficiaires
Pour qui
- Développeurs
- Professionnels IT
- Designers web
Prérequis
- Compréhension de base du HTML et du CSS
- Expérience de travail avec des éditeurs de texte et des navigateurs web
- Connaissance de base de la conception et de la création de pages web simples
Contenu de la formation
-
Fonctionnalités avancées en HTML5 (7 heures)
- Rappels sur les fondamentaux en HTML5
- Découverte des dernières spécifications de HTML5 et de l'importance des balises sémantiques pour la structure du contenu web
- Exploration des balises comme <header>, <nav>, <section>, <article>, <footer> et leur rôle dans l'amélioration de l'accessibilité et du référencement
- Introduction à l'intégration native de l'audio et de la vidéo dans les pages web à l'aide des balises <audio> et <video>
- Discussion sur les formats de fichiers pris en charge, les contrôles de lecture et les options de personnalisation
- Travaux Pratiques : Création d'une page web d'évènement mettant en pratiques des balises et une vidéo promotionnelle en ajoutant des contrôles de lecture et une personnalisation
-
Fonctionnalités avancées en CSS3 (7 heures)
- Rappels en CSS3
- Exploration des fonctionnalités CSS3 pour ajouter des effets visuels attrayants aux éléments HTML
- Utilisation de propriétés telles que box-shadow, text-shadow, border-radius, et gradient pour styliser les éléments de manière esthétique
- Compréhension des principes du Flexbox pour créer des mises en page flexibles et réactives
- Utilisation des propriétés telles que display: flex, flex-direction, justify-content, et align-items pour contrôler la disposition des éléments
- Travaux Pratiques : Création d'effets visuels sur une carte de présentation interactive et création d'une grille flexible pour organiser ces éléments de pages de manière dynamique
-
Principes du Responsive Web Design (7 heures)
- Fondamentaux du RWD
- Introduction aux media queries pour adapter le design aux différentes tailles d'écran et orientations
- Travaux pratiques : Refonte d'une page web existante de manière responsive en utilisant des media queries pour ajuster la mise en page et les images en fonction de la résolution de l'écran.
- Utilisation de techniques telles que les images fluides, les unités relatives et les pourcentages pour créer des mises en page adaptatives
- Présentation des frameworks CSS tels que Bootstrap et Foundation pour accélérer le développement de sites web réactifs
- Discussion sur les composants, la grille, et les classes utilitaires offerts par ces frameworks
- Travaux Pratiques : Refonte d'une page web avec Bootstrap pour comparer l'approche manuelle avec l'utilisation d'un framework CSS
-
Optimisation des performances et accessibilité (7 heures)
- Stratégies pour améliorer la vitesse de chargement des pages web en réduisant la taille des fichiers, en optimisant les images et en utilisant le lazy loading
- Utilisation d'outils d'audit de performance pour identifier les goulots d'étranglement et appliquer des optimisations
- Introduction aux principes de l'accessibilité web pour rendre le contenu web utilisable par tous les utilisateurs, y compris ceux ayant des besoins spécifiques
- Discussion sur les bonnes pratiques pour la structure du contenu, la navigation et la gestion des formulaires
- Travaux Pratiques : Évaluer l'accessibilité d'une page web avec des outils spécifiques et à mettre en œuvre des corrections pour répondre aux standards WCAG
-
Projet de Site Web Responsive (7 heures)
- Méthodologies de conception et de planification pour créer un site web responsive, y compris le wireframing et la création de prototypes
- Discussion sur les meilleures pratiques de conception pour garantir une expérience utilisateur optimale sur tous les appareils
- Processus de test et de déploiement d'un site web sur différents appareils et navigateurs pour assurer une compatibilité maximale
- Utilisation d'outils de test et de services d'hébergement pour déployer le site web de manière sécurisée et fiable
- Projet final : Création, test et déploiement d'un site web responsive en mettant en pratiques toutes les notions abordées durant la formation
Équipe pédagogique
Professionnel expert technique et pédagogique.
Suivi de l'exécution et évaluation des résultats
- Feuilles de présence.
- Questions orales ou écrites (QCM).
- Mises en situation.
- Formulaires d'évaluation de la formation.
- Certificat de réalisation de l’action de formation.
Ressources techniques et pédagogiques
- Espace numérique de travail
- Documents supports de formation projetés
- Exposés théoriques
- Etude de cas concrets
- Quiz en salle
- Mise à disposition en ligne de documents supports à la suite de la formation
Qualité et satisfaction
Taux de satisfaction des apprenants, nombre d'apprenants, taux et causes des abandons, taux de retour des enquêtes, taux d'interruption en cours de prestation...
Délai d'accès
2 semaines