Accueil > Développement informatique et DevOps > CSS 3 avancé et Responsive Design
Formation #DEV181

Formation CSS 3 avancé et Responsive Design

Durée : 4 jours

Code : DEV181


Prochaines dates programmées :

Du 16 au 19 Avril 2024

Du 06 au 09 Août 2024

Du 17 au 20 Déc. 2024

Fin d'Inscription :
Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.
Si vous avez un besoin URGENT et que vous souhaitez une date de formation plus proche que les sessions programmées (minimum 15 à 20 jours ouvrés à date de votre demande)

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 16 au 19 Avril 2024
  • Du 06 au 09 Août 2024
  • Du 17 au 20 Déc. 2024
  • Fin d'Inscription :
    Le Bulletin d'Inscription doit être rempli, cacheté, signé et envoyé par email : Au minimum 15 JOURS OUVRÉS avant la date de formation.