EduGroupe accompagne les entreprises dans leurs projets de formation liée aux technologies informatiques
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
