Formation CSS 3 avancé et Responsive Design

  • Référence : DECSS3
  • Durée : 14 heures
  • Certification : Non
  • Eligible CPF : Non

CONNAISSANCES PREALABLES

  • 1-Avoir des connaissances de base HTML / CSS
  • 2-Avoir suivi la formation DEHTML05 - HTML 5, CSS 3, Responsive - Création de pages Web ou posséder les connaissances et compétences équivalentes

PROFIL DES STAGIAIRES

  • Développeurs, concepteurs Web, webmasters

OBJECTIFS

  • Concevoir des layouts de page en CSS
  • Structurer efficacement vos CSS
  • Définir le Responsive Design
  • Utiliser les nouveautés CSS 3

METHODES PEDAGOGIQUES

  • 6 à 12 personnes maximum par cours, 1 poste de travail par stagiaire
  • Remise d’une documentation pédagogique papier ou numérique pendant le stage
  • La formation est constituée d’apports théoriques, d’exercices pratiques et de réflexions

METHODES D'EVALUATION DES ACQUIS

  • Auto-évaluation des acquis par le stagiaire via un questionnaire
  • Attestation de fin de stage adressée avec la facture

FORMATEUR

Consultant-Formateur expert Développement Internet

CONTENU DU COURS Développement Internet

1 - Rappel sur les CSS

  • Sélecteurs : Composés
  • Propriétés des boîtes : Box-sizing
  • Propriétés des boîtes : Position
  • Unités : Absolue
  • Unités : Relatives
  • Sélecteurs : Simples

2 - Les écrans

  • Taille
  • Résolution
  • Valeur du pixel : CSS pixel/Device pixel
  • Valeur du pixel : Pixel ratio : hdpi, xhdpi, xxhdpi
  • Valeur du pixel : HiDPI (High Dots Per Inch)

3 - HTML

  • Structure de la page
  • Gestion du viewport
  • @import

4 - Les modes de positionnement

  • Position absolue
  • Grille
  • Boîtes flexibles
  • Flottement

5 - Responsive Design

  • Adaptation : Des contenus
  • Adaptation : Du positionnement
  • Adaptation : De la navigation
  • La stratégie du Mobile First

6 - Les Media Queries

  • Types de médias
  • Breakpoints
  • Syntaxe des requêtes

7 - Les animations et transitions

  • Définition des animations
  • Images clés

8 - Cas particuliers

  • Textes
  • Images : Images HiDPI
  • Images : Balises
  • Images : Test sous Firefox
Cookies