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

Icon2018 module presentiel
ObjectifsIdentifier les standards HTML5 et CSS3Découvrir le potentiel graphique des CSS3Composer et modifier une maquette Web responsiveIntégrer les balises HTML5 : vidéo, audio et CanvasCré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é-requisPour suivre cette formation, il est nécessaire d’avoir suivi les stages “HTML5 : les fondamentaux” (page 130) et “CSS3 : les fondamentaux” (page 131) 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 : ellipse, 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

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

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 

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

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

Méthodes pédagogiquesLogiciels : WebStorm, Brackets…
Moyens techniquesMoyens spécifiques à cette formation :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 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 formateur

Inté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 1 550 € HT

Sélectionner une date dans la liste :

Vous devez sélectionner une date

Sélectionner votre profil :

Vous devez sélectionner votre profil

HTML5, CSS3 et le responsive Web design

3 jours 21 heures 1 390 €HT*


* Prix par jour (à 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)