Accueil > Développement Logiciel, Devops > CSS 3 avancé et Responsive Design
Formation #DEV181

Formation CSS 3 avancé et Responsive Design

Formation avec Restauration incluse
(Déjeuner, Petit Déjeuner et Pauses Cafés)

Durée : 4 jours

Code : DEV181


Sessions programmées :

Du 23 au 26 Fév. 2021

Du 06 au 09 Avril 2021

Du 08 au 11 Juin 2021

Du 14 au 17 Sept. 2021

Du 16 au 19 Nov. 2021

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email :
  • Pour les entreprises AU MAROC :
    Au minimum 10 JOURS OUVRÉS avant la date de formation
  • Pour les entreprises HORS MAROC :
    Au minimum 15 JOURS OUVRÉS avant la date de formation

Formation dans votre entreprise.

Durée : 4 jours

Code : DEV181


Vous souhaitez réaliser cette formation en vos locaux avec le même programme ?

Vous souhaitez personnaliser le programme de cette formation pour qu'elle réponde aux spécificités de votre entreprise ?

Objectifs

  • Identifier les standards HTML5 et CSS3
  • Découvrir le potentiel graphique des CSS3
  • Composer et modifier une maquette Web responsive
Programme
1/ Les règles CSS2 et CSS3
  • Les sélecteurs html
  • Les différents types de sélecteur css : classe, id et pseudo-classe
  • Propriétés des boîtes
  • Box-sizing
  • Position...
  • Unités
  • Absolue
  • Relatives
2/ Les écrans
  • Taille
  • Résolution
  • Valeur du pixel
  • CSS pixel / Device pixel
  • Pixel ratio : hdpi, xhdpi, xxhdpi...
  • HiDPI (High Dots Per Inch)
3/ HTML
  • Structure de la page
  • La meta HTML "viewport"
4/ Les modes de positionnement
  • Flottement
  • Position absolue
  • Boîtes flexibles
  • Grille
5/ Le responsive design avec HTML5 CSS 3
  • Le concept de responsive design
  • Les critères pour mobiles (width, height, device-width, device-pixel-ratio, orientation, etc.)
  • Prise en compte de l'orientation
  • Mobile First : pourquoi les petits écrans en priorité ?
6/ Les tailles des devices mobiles
  • Des vrais et des faux pixels
  • Taille de fenêtre virtuelle : Viewport
  • Taille d'écran : screen-width
  • Taille déclarée : device-width
  • Le pixel-ratio
7/ Les Media Queries en CSS
  • Types de médias
  • Comment choisir ses breakpoints
  • Syntaxe des requêtes
8/ Les images responsive
  • "Retina" ?
  • La base : les images fluides
  • Images de décoration (cover, image-set())
  • Images de contenu (srcset, <picture>)
  • Tester la connectivité et la bande passante
9/ Performances et Web mobile
  • Comment tester
  • Notions de ligne de flottaison, chemin critique, visually complete et speed index
  • Atelier performances mobiles
  • Astuce mobile : "icônes", SVG et fontes d'icônes
  • Astuce mobile : polices de caractères performantes
  • Soigner son chemin critique : étude de cas
Approche Pédagogique

Approche Pédagogique

  • Pédagogie très opérationnelle fondée sur l'alternance entre théorie et pratique
  • Cas pratiques
  • Remise d’outils
  • Echanges d’expériences
Public Cible

Personnes Visées

  • Développeurs
  • Concepteurs Web
  • Webmasters
Dates

Dates

  • Du 23 au 26 Fév. 2021
  • Du 06 au 09 Avril 2021
  • Du 08 au 11 Juin 2021
  • Du 14 au 17 Sept. 2021
  • Du 16 au 19 Nov. 2021
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email :
    • Pour les entreprises AU MAROC : Au minimum 10 JOURS OUVRÉS avant la date de formation
    • Pour les entreprises HORS MAROC : Au minimum 15 JOURS OUVRÉS avant la date de formation