Responsive Design avec HTML/CSS
La formation « Responsive Design avec HTML/CSS » permet aux stagiaires d’acquérir les compétences essentielles en intégration web, en maîtrisant la création de pages responsives et de newsletters optimisées pour tous les écrans et navigateurs. Ils apprendront à respecter les standards du web, l’accessibilité et l’ergonomie, tout en optimisant l’affichage et la compatibilité multi-supports.
Grâce à une approche pratique, ils seront capables de structurer du contenu en HTML5/CSS3, d’utiliser des frameworks comme Bootstrap, d’intégrer des emails compatibles avec les différents clients de messagerie et de tester leurs créations sur divers périphériques.
- Maîtriser l’intégration HTML/CSS pour la création de pages web
- Appliquer les bonnes pratiques en matière d’accessibilité, d’ergonomie et de performance web
- Adapter les pages web à différents supports (desktop, tablette, mobile) en utilisant le Responsive Design
- Concevoir et intégrer des newsletters pour différents clients de messagerie
- S’assurer de la compatibilité des pages avec les principaux navigateurs
Public visé et pré-requis
- Web designers et développeurs front-end souhaitant maîtriser l’intégration responsive
- Chargés de communication digitale souhaitant créer des newsletters
- Demandeurs d’emploi souhaitant développer ou acquérir des compétences en intégration de page web responsive et de création de newsletter
- Etudiants, jeunes diplômé.es en communication, graphisme souhaitant maîtriser le Responsive Design
- Avoir des connaissances opérationnelles en HTML5/CSS ou avoir suivi le module “Maîtriser les fondamentaux de la mise en page web avec HTML et CSS”
- Maîtrise impérative de l’environnement informatique (PC/Mac) et de la navigation web.
1 400 €
Financement sur-mesure possible selon profil, financement OPCO possible (sous condition d’éligibilité).
5 jours
(35 heures)
Choisissez votre centre
Lyon
Session sur Lyon le 27/01/2025 Présentiel.
Session sur Lyon le 21/07/2025 Présentiel.
PROGRAMME
JOUR 1
INTRODUCTION
- Présentation des objectifs et de la semaine de formation
- Enjeux du HTML/CSS dans le développement web
BASES DE L’INTEGRATION HTML ET CSS
- Structure d’une page HTML
- Bonnes pratiques de sémantique et accessibilité
- Intégration des médias (images, vidéos, icônes SVG)
- Bases du CSS
- Sélecteurs et propriétés essentielles
- Positionnement des éléments
- Bonnes pratiques pour un CSS maintenable et structuré
- Atelier pratique : création d’une première page web simple en HTML/CSS
JOUR 2
TECHNIQUES AVANCEES DE CSS ET INTRODUCTION AU RESPONSIVE DESIGN
- Typographie et couleurs
- Utilisation des unités relatives (em, rem, %)
- Importation et gestion des polices web
- Bonnes pratiques d’accessibilité sur la typographie et le contraste
- Flexbox et Grid Layout
- Comparaison des méthodes de mise en page
- Utilisation avancée de Flexbox pour des interfaces dynamiques
- Introduction à CSS Grid
- Responsive Design : principes et mise en œuvre
- Différence entre site adaptatif et site responsive
- Introduction aux Media Queries
- Approche Mobile First vs Desktop First
JOUR 3
INTEGRATION RESPONSIVE ET COMPATIBILITE NAVIGATEURS
- Adaptation d’un site aux différents écrans
- Gestion des images responsives (srcset, formats optimisés)
- Définition des breakpoints et stratégies d’adaptation
- Optimisation et compatibilité navigateurs
- Validation du code (W3C, Lighthouse)
- Problèmes courants et solutions CSS (prefixes, fallbacks)
- Gestion des polices et icônes sur plusieurs navigateurs
- Introduction à Bootstrap (optionnel)
- Présentation du framework CSS
- Grille Bootstrap et classes utilitaires
JOUR 4
INTEGRATION ET OPTIMISATION DES NEWSLETTERS
- Spécificités des emails HTML
- Contraintes et bonnes pratiques des clients de messagerie
- Différence entre HTML pour le web et HTML pour les emails
- Techniques de mise en page pour les emails
- Structure d’un email en tables HTML
- Utilisation de CSS inline pour garantir une compatibilité maximale
- Tester l’affichage sur différents clients email (Gmail, Outlook, Apple Mail)
- Personnalisation et dynamique dans les emails
- Intégration des images et textes dynamiques
- Gestion des CTA et interactions
- Atelier pratique : création et test d’une newsletter HTML responsive
JOUR 5
TESTS, VALIDATION ET BILAN DE LA FORMATION
- Tests et validation des pages web et emails
- Outils de test en ligne
- Bonnes pratiques pour optimiser les performances web
- Accessibilité et audit WCAG
- Débogage et correction des erreurs courantes
- Optimisation du poids des pages et des emails
- QCM final pour valider les acquis
- Retour d’expérience et perspectives d’approfondissement
Évaluation et validation
- Evaluation QCM
- Attestation de stage
SUITE DE PARCOURS
Vous pouvez suivre les autres modules du parcours « web design avancé : HTML – CSS & WordPress », qui délivre le certificat de compétences BC03 « Réaliser, améliorer et animer des sites web » du titre professionnel « Concepteur Designer UI » – Niveau 6, RNCP 35 634, délivré par le ministère du travail du plein emploi et de l’insertion et enregistré le 01/06/2021 par France Compétences. Cette formation est éligible au CPF.
MÉTHODES MOBILISÉES & ENCADREMENT
- Alternance entre théorie et exercices pratique
- Formation en présentiel, distanciel nous consulter, dispensée par un.e formateur.ice expert.e du Web et du Design.
ACCESSIBILITÉ AUX PERSONNES EN SITUATION DE HANDICAP
Un.e référent.e handicap est à votre écoute sur chaque centre de formation. Pour plus d’informations, rendez-vous sur notre page dédiée :
3is-executive.fr/handicap-et-accessibilite
N’hésitez pas à nous contacter !