Pages web modernes : créer avec HTML5, CSS3 et responsive design Présentiel

• Décrire la structuration d'une page HTML 5 et ajouter des styles CSS.
• Créer des formulaires Web avec Web Forms 2 et travailler avec les balises sémantiques d'HTML 5.
• Utiliser les frameworks CSS pour un développement responsive.
• Exploiter les 'media queries' pour adapter les pages Web aux différentes tailles d'écran.
• Appliquer les concepts de conception responsive pour une meilleure expérience utilisateur.

Jour 1

Matin : Introduction au HTML 5 et CSS 3

Structuration d'une page Web avec HTML 5 et les balises sémantiques : header, nav, section, article, footer.

Création d'un formulaire avec Web Forms 2 : champs de saisie, listes déroulantes, boutons radio, champ Date.

Définir et tester les balises HTML 5 : audio, vidéo, et autres éléments multimédia.

Premiers pas avec CSS : sélecteurs, propriétés de mise en forme (padding, marges, bordures), et introduction aux media queries.

Exemple de travaux pratiques : Création d'une page Web simple avec HTML 5 et ajout de styles CSS.

Après-midi : Mise en forme et frameworks CSS

Introduction aux frameworks CSS : Bootstrap et Foundation.

Mise en forme d'un formulaire et d'un tableau avec Bootstrap.

Positionnement des éléments : block, inline, flex, et positionnement absolu et relatif.

Exemple de travaux pratiques : Création d'un formulaire de saisie avec validation automatique et mise en forme de tableau.

Jour 2

Matin : Responsive Design et Media Queries

Approfondir l'utilisation des media queries pour adapter la mise en page aux différentes tailles d'écran : mobile, tablette, desktop.

Mise en place d'une grille fluide avec CSS 3 et test de grilles responsives (types fixes et fluides).

Travailler avec les outils de visualisation : utilisation de Flexbox et autres méthodes pour la gestion des blocs.

Exemple de travaux pratiques : Création d'une page responsive et ajustement selon les points de rupture avec les media queries.

Après-midi : Frameworks responsives et bonnes pratiques d'accessibilité

Détection des ressources avec Modernizr et utilisation de CSS 3 PIE pour la compatibilité avec les navigateurs anciens.

Bonnes pratiques de construction HTML : améliorer l'accessibilité selon les standards RGAA (Référentiel Général d'Amélioration de l'Accessibilité Numérique).

Travail avec les frameworks responsives : Installation et test de Bootstrap.

Exemple de travaux pratiques : Adaptation des pages pour l'accessibilité et tests de mise en forme pour différentes tailles d'écran.

• Notre approche pédagogique repose sur une alternance entre apports théoriques opérationnels et mises en pratique directement issues du contexte professionnel des participants.
• Chaque thème traité s'appuie sur des études de cas concrets et des exercices pratiques, conçus spécifiquement à partir des situations réelles rencontrées dans l'environnement professionnel des stagiaires.
• Nos méthodes favorisent l'adaptation aux besoins de chaque participant afin d'optimiser leur engagement et leur apprentissage.
• L'animation privilégie une pédagogie active, favorisant les échanges, l'analyse réflexive des pratiques et une adaptation continue aux réalités professionnelles des participants.

• Des supports pédagogiques numériques adaptés au contexte professionnel sont remis aux participants.
• Dispositifs pédagogiques variés sont mobilisés tout au long de la formation (études de cas, exercices pratiques, travaux en sous-groupes, mises en situation, jeux pédagogiques) favorisant l'apprentissage actif, collaboratif et l'appropriation des contenus.

• Un QCM est réalisé en début et en fin de formation afin d'évaluer l'évolution des connaissances.
• Le suivi des stagiaires est assuré tout au long de la formation à travers des ateliers pratiques, des mises en situation et des échanges permettant d'évaluer leur participation et leur progression.

Une attestation individuelle de formation sera remise à chaque participant à l'issue de la formation.