Ferme la recherche

HTML5, CSS3 et le responsive web design

Descriptif

Durée de la formation

Durée 21 heures
En centre 21 heures

Session

du 01 avril 2020 au 03 avril 2020  - Paris - 2ème (75)
+ autres sessions
du 01 avril 2020 au 03 avril 2020  - Paris - 2ème (75)
du 01 avril 2020 au 03 avril 2020  - Paris - 2ème (75)
du 16 sept. 2020 au 18 sept. 2020  - Paris - 2ème (75)
du 16 sept. 2020 au 18 sept. 2020  - Paris - 2ème (75)
du 21 déc. 2020 au 23 déc. 2020  - Paris - 2ème (75)
du 21 déc. 2020 au 23 déc. 2020  - Paris - 2ème (75)

Objectif de la formation

- 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

Description de la formation

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 #0x40#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

Conditions d'accès

Les apprenants doivent avoir une bonne pratique de l'outil informatique et connaître la navigation sur le Web.
Webdesigners, créateurs d'EPUB ou de publications digitales, intégrateurs, développeurs ou toute personne qui utilise déjà les CSS.

Validation

Attestation d'acquis ou de compétences;Attestation de suivi de présence

Donne accès au(x) métier(s) suivant(s)

Conception de contenus multimedias (voir la fiche métier)

Et après la formation ?

Retour à l'emploi des anciens stagiaires

CORRECT

Conseils
Les questions à poser avant de choisir un centre de formation
  • Quels sont les profils des anciens stagiaires (niveau de formation, expérience professionnelle) ?
  • Est-il possible de visiter le centre ?
  • Quel type de public accueillez-vous en formation (salariés, demandeurs d’emploi, particuliers) ?
  • Peut-on obtenir une liste de ces anciens stagiaires pour les interroger sur cette formation ?
  • Comment aidez-vous les stagiaires à trouver un emploi ?

Pyramyd NTCV

Lieu de formation

Pyramyd NTCV
15 Rue de Turbigo
Paris - 2ème

Calculez votre itinéraire

Centre de formation

Pyramyd NTCV
15 Rue de Turbigo
75002, Paris 2e

Toutes les formations et avis pour Pyramyd NTCV