01 40 26 00 99 15 rue de turbigo - 75002 Paris Nous contacter

Création de sites / intégration HTML5, CSS3 et le responsive Web design

Créer et modifier des sites Web responsive

Objectifs

→ Identifier les standards HTML5 et CSS3

→ Découvrir le potentiel graphique des CSS3

→ Composer et modifier une maquette Web responsive

→ Intégrer les balises HTML5 : vidéo, audio et Canvas

→ Créer des motifs élaborés en CSS3

Public concerné

Webdesigners, créateurs d‘EPUB ou de publications digitales, intégrateurs, développeurs ou toute personne qui utilise déjà les CSS.

Pré-requis

Pour suivre cette formation, il est nécessaire d‘avoir suivi les stages “HTML5 : les fondamentaux” et “CSS3 : les fondamentaux” ou de maîtriser les techniques d‘intégration suivantes : sélecteurs CSS2.1, propriétés du modèle de boîte CSS et les différents modèles de positionnement CSS.

Pré-requis

Pour suivre cette formation, il est nécessaire d‘avoir suivi les stages “HTML5 : les fondamentaux” et “CSS3 : les fondamentaux” ou de maîtriser les techniques d‘intégration suivantes : sélecteurs CSS2.1, propriétés du modèle de boîte CSS et les différents modèles de positionnement CSS.

Programme

Identifier les standards HTML5 et CSS3

  • Identifier les nouvelles balises HTML5 et les éléments obsolètes
  • Noter l‘actualité des modules CSS3 et leur niveau d‘implémentation dans les navigateurs

 

Étude de cas : visionnage et analyse technique de sites Web avec l‘inspecteur du navigateur

Découvrir le potentiel graphique des CSS3

  • Comprendre l‘usage de la déclaration box-sizing et ses valeurs
  • Comparer les différentes solutions pour centrer un bloc et ses contenus : line-height, marges auto, paddings et box-sizing, displays
  • Créer des formes avec les propriétés de border : ellipses, rond, triangle…
  • Habiller les textes et blocs avec des ombres : text-shadow, box-shadow
  • Transformer et interagir avec le logo au survol avec CSS3 transform :hover et transition
  • Animer le logo avec le module CSS3 animation

 

Exercice : créer un logo intégralement en CSS3

Composer et modifier une maquette Web responsive

Créer une maquette responsive avec les unités relatives et accessibles

  • Comprendre la notion de responsive design
  • Convertir le texte avec les unités em et rem pour l‘accessibilité
  • Créer un gabarit fluide en utilisant les marges auto, les unités %, min-width, max-width, column
  • Insérer les nouvelles balises HTML5
  • Distinguer les nouveaux sélecteurs CSS3 et CSS4
  • Calculer les tailles d‘objets avec l‘unité calc

Habiller le texte avec les polices embarquées

  • Décrypter la règle @font-face
  • Identifier les formats de polices WOFF, SVG, TTF

 

Réviser les display, créer une grille et décrypter Flexbox pour des mises en pages avancées

  • Déplacer les éléments avec les display block, inline, inline-block, table, table-cell, Flexbox
  • Créer une grille de mise en pages
  • Diviser en colonnes avec les propriétés column-count, column-gap, column-rule
  • Comprendre les différents affichages de Flexbox

 

Intégrer avec les Media Queries

  • Modifier l‘apparence d‘une page
  • Identifier les points de rupture de mise en pages
  • Adapter sa maquette selon les supports
  • Connaître les bonnes pratiques de codage pour optimiser son code CSS
  • Créer des images responsive

 

Exercice : créer un design CSS responsive de A à Z

Intégrer les balises HTML5 : vidéo, audio et Canvas

  • Appréhender les formats conteneurs et codecs audio / vidéo pour le Web
  • Coder un player simple avec l‘API de la balise audio HTML5
  • Contrôler la vidéo HTML5 et appliquer des effets CSS
  • Découvrir l‘API de dessin 2D avec l‘élément Canvas

 

Exercice : intégrer chacune de ces balises dans une page

Créer des motifs élaborés en CSS3

  • Choisir les balises et une méthode d‘affichage de la galerie
  • Insérer un compteur et utiliser les sélecteurs :before, :after
  • Identifier les nouvelles méthodes pour créer des motifs avec les background CSS3 : size, multiples, contain, cover, origin
  • Créer des dégradés simples (linéaire et radial) avec plusieurs couleurs
  • Créer des motifs complexes avec les gradient et les valeurs de background
  • Ajouter de l‘interaction

 

Exercice : coder des motifs et des dégradés élaborés et animés

Méthodes pédagogiques

Alternance de théorie, de démonstrations par l‘exemple et de mise en pratique. Travail en autonomie : conception d‘une maquette complète en HTML5 et CSS3.

Moyens techniquesMoyens spécifiques à cette formation :→ Logiciels : WebStorm, Brackets…

Moyens génériques :

  • d’un poste de travail Mac ou PC de dernière génération équipé d’un écran plat 21” ou 27”
  • d’une tablette graphique
  • d’un iPad sur demande
  • d’une connexion très haut débit à Internet
  • d’une clé USB de 8 Go offerte en début de formation
  • Le poste du formateur est relié à un système de vidéo projection
  • 8 participants maximum par stage
  • 9 participants pour les formations certifiantes
  • Toutes les formations sont dispensées sur les dernières versions officielles de chaque logiciel
  • Un support de cours ou un livre est remis à l’issue des principaux stages
Suivi
  • Chaque apprenant bénéficie d’une hotline gratuite et illimitée par e-mail
  • Fiche d’évaluation, feuille d’émargement et attestation de présence
Profil du formateurIntégrateur CSS / Développeur front-end ayant plus de 10 ans d‘expérience en enseignement.
Marketing Digital
Web
Médias sociaux
Voir toutes les formations

HTML5, CSS3 et le responsive Web design

3 jours 21 heures 4 170 €HT*

* À partir de

Organisez cette formation dans votre entreprise selon vos plannings et les disponibilités de nos intervenants (dates continues ou discontinues).

Cliquez ici pour plus d'informations

Ce tarif inclut :

  • La préparation pédagogique de la formation par notre équipe (validation des pré-requis, définition des objectifs et des compétences visées
  • Un entretien téléphonique avec le formateur
  • L’animation de cette formation dans vos locaux pour 3 stagiaires maximum
  • Les supports de cours (si prévus)
  • La gestion administrative de la formation (frais de dossier, devis, conventions…)

Ce tarif n’inclut pas :

  • La mise à disposition du matériel nécessaire au bon déroulé de la formation (ordinateurs, vidéo-projecteur, logiciels…),
  • De rendez-vous de préparation avec le formateur,
  • La conception de supports spécifiques,
  • Les éventuels frais de déplacement et d’hébergement du formateur.

Important :

  • Ces formations peuvent également être organisées dans nos salles de formation exclusivement pour vos collaborateurs (dans ce cadre, nous nous chargeons de tous les aspects logistiques).
  • Dans le cadre de formations « intra / sur mesure », la durée des formations peut bien sûr être modifiée selon vos impératifs et objectifs

Fermer

Demander un devis
L'avis des participants
Qu'avez-vous préféré pendant ce stage : "Les transitions, flex et le responsive en général. Tout a été très bénéfique."
Roland T. - Graphiste / Webdesigner pour Alloresto.fr (session du 13 au 15 février 2017)
Qu'avez-vous préféré pendant ce stage : "les explications claires même pour un stage assez rythmé !"
Emmanuel B. - Responsable production au Groupe Moniteur (session du 5 au 7 octobre 2016)
Formation technique et pratique qui m'a permis de remettre mes connaissances à jour
Jorge G. - Responsable Webdesign chez Carrefour (session du 5 au 7 octobre 2016)