À distance
Ref
WM06519

HTML5, CSS3 et le responsive Web design

Créer et modifier des sites Web responsive

Perfectionnement
3 jours - 21 heures
Paris

La part de trafic internet qui provient des appareils mobiles est depuis quelques années déjà supérieure à celle des ordinateurs fixes.

Pour un développeur web, il ne s'agit donc plus seulement de s'assurer qu'un site existant est bien responsive, mais de penser et concevoir son projet comme étant mobile avant tout, dès l'origine.

Pour vous accompagner dans cette démarche, PYRAMYD a élaboré cette formation HTML5, CSS3 et le responsive Web design.

Outre les bonnes pratiques du responsive design, vous apprendrez à utiliser les Media Queries, à comprendre les Viewport, à appréhender les framework Bootstrap et Fondation et plus encore.

Cette formation HTML5, CSS3 et le responsive Web design est destinée à tous les intégrateurs, webdesigners et développeurs déjà familiers du CSS.

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
Compétences acquises
Créer des pages Web simples ou modifier des contenus HTML existants
Public
  • Webdesigners
  • Créateurs d’EPUB ou de publications digitales
  • Intégrateurs
  • Développeurs ou toute personne qui utilise déjà le CSS.
Prérequis

Les apprenants doivent avoir une bonne pratique de l’outil informatique et connaître la navigation sur le Web.

Programme
Pendant
HTML5, CSS3 et le responsive Web design

Découvrir l’écosystème du Web mobile actuel


• Comprendre et distinguer les notions de Web adaptatif, site responsive, application native, WebApp, progressive WebApp…
• Analyser les usages actuels
• Respecter les bonnes pratiques de la mobilité : contraintes et optimisations, amélioration progressive vs dégradation élégante
Étude de cas : analyse de sites et d’applications remarquables


Comprendre le responsive Web design


• Comprendre les notions de Viewport et de variabilité de mises en pages
• Distinguer et définir les points de rupture
• Composer avec les nouveaux concepts du responsive design : surface d’affichage vs surface de rendu, pixel physique vs pixel CSS
Étude de cas : analyse de sites remarquables


Maîtriser les Media Queries


• Décrypter la règle @media : les types de médias et types de requêtes (min-width, orientation, aspect-ratio…)
• Choisir ses largeurs de colonnes et les points de rupture
• Ajouter la balise meta Viewport pour iOS
• Identifier les types et techniques de gabarits : fixes, élastiques, fluides, mixte, flex, column, grid layout, grilles…
Exercice : créer des gabarits et leurs points de rupture


Maîtriser les techniques de mise en pages CSS responsive


• Repositionner les fondamentaux
- identifier le rôle des reset et des pré-processeurs
- clarifier les notions d’héritage et de poids de sélecteurs
- utiliser les sélecteurs avancés
- calculer les tailles d’objet avec le modèle de boîte standard et la propriété box-sizing
- contrôler les fusions de marge
- calculer les tailles de texte, les largeurs de colonnes et points de rupture
• Utiliser les techniques avancées de mise en pages
- maîtriser les techniques et astuces de déplacement et de centrage : margin auto, displays inline, inline-block, position et %, vertical-align, line-height, table et table-cell, column
- définir ses largeurs de colonnes : min et max-width, unités em
- maîtriser les flottants : overflow, clear, clearfix
- convertir une maquette “classique” en RWD
- réaliser une maquette RWD avec Flexbox
- analyser une maquette RWD avec Grid Layout
- découvrir les systèmes de grille responsive et les frameworks actuels : Bootstrap, Foundation
Exercice : composer différentes maquettes responsive

Adapter ses contenus aux capacités des écrans et bandes passantes


• Calculer les ratios pour présenter les contenus image et vidéo
• Découvrir les trucs et astuces de l’optimisation : “compression zero”, SVG inline et génération de sprites, background-images, srcset…
• Contrôler les déplacements, masquages et chargements conditionnels
• Utiliser les outils de test
• Utiliser les polyfills pour les anciens navigateurs
Exercice : mettre en oeuvre ces pratiques selon les besoins des apprenants

Financement

Plusieurs dispositifs de financement sont accessibles via les OPCO (Opérateurs de Compétences), organismes agréés par le ministère du Travail dont le rôle est d’accompagner, collecter et gérer les contributions des entreprises au titre du financement de la formation professionnelle.

Pour plus d’information, une équipe de gestionnaires ABILWAYS spécialisée vous accompagne dans le choix de vos formations et la gestion administrative.

Nous contacter pour en savoir plus
Points forts
Nos intervenants
Kevin MERCIER
Kevin MERCIER
Modalités pédagogiques

Matériel et/ou logiciels nécessaires pour suivre cette formation :

Formation en présentiel : les ordinateurs sont équipés des logiciels nécessaires au suivi de cette formation.

Si vous utilisez votre ordinateur personnel (pour formation en présentiel ou classe virtuelle), merci d' installer au préalable : Brackets ( GitHub), Filezilla, Visual Studio Code, se munir d'un éditeur de texte de type bloc note.

Il est recommandé de se munir d'un double écran.

Équipe pédagogique : Un consultant expert de la thématique et une équipe pédagogique en support du stagiaire pour toute question en lien avec son parcours de formation.

Techniques pédagogiques : Alternance de théorie, de démonstrations par l’exemple et de mise en pratique grâce à de nombreux exercices individuels ou collectifs.

Exercices, études de cas et cas pratiques rythment cette formation.

Ressources pédagogiques : Un support de formation présentant l'essentiel des points vus durant la formation et proposant des éléments d'approfondissement est téléchargeable sur notre plateforme.

Contexte

Vous envisagez une nouvelle carrière de développeur web ? Impossible de faire l’impasse sur les langages HTML5, CSS3 et sur le responsive web design. Pourquoi songer à une formation CSS et HTML ? Simplement parce que l'accès aux informations se fait principalement via les smartphones. D'après le dernier relevé de We are Social, 96,3 % des internautes accèdent à internet via leur mobile, autant dire tout le monde ! C'est pour cela que la conception de sites web réactifs et adaptables est plus importante que jamais. Le design web responsive, quant à lui, garantit que ces sites s'affichent correctement, quel que soit l'appareil utilisé. 

Avis sur cette formation
★★★★★
★★★★★
4.8571/5
(7 avis)
GUILLAUME D.
publié le 22/08/2024
5/5
Cette formation apporte les bases du responsive web design. Prérequis : connaitre un minimum le html5 et CSS3
MIRANA R.
publié le 13/08/2024
5/5
La formation était complète et menée de façon très professionnelle et pédagogue par le formateur.
MATTHIEU D.
publié le 09/12/2023
5/5
J'ai aimé le contenu de la formation et le formateur. J'ai d'ailleurs conseillé la formation à une collègue.
anonymous a.
publié le 03/11/2022
5/5
Très bonne formation faite par Eva Kasal qui s'adapte aux niveaux des participants. Un très bon équilibre entre le théorique et le pratique. Cette formation a répondu parfaitement à mes attentes.
anonymous anonymous.
publié le 26/10/2021
5/5
1 - La formatrice est très bonne dans son domaine. Sa passion est très communicative.
anonymous a.
publié le 29/12/2020
4/5
Une formation adaptée aux différents niveaux, je suis très satisfaite.
anonymous a.
publié le 09/04/2020
5/5
C'est la base du web aujourd'hui ! Si on ne connait pas le responsive, il faut choisir cette formation ! C'était très clair, pointu et complet. Les exercices permettent de s'imprégner du vocabulaire assez facilement. Bref, je recommande à 100 % !
Date de mise à jour : 26/11/2024