Pré-requis
Etre déjà familier avec les subtilités des langages HTML et CSS. .
Objectifs
Savoir exploiter le potentiel de la norme CSS3 et employer pertinemment les nouveautés apportées : les méthodes de positionnement, de sélectionnement, de décoration, de transitions et d’animations.
Public concerné
Webmasters, concepteurs Web, développeurs, chefs de projets techniques.
Profil du formateur
Formateur consultant, expert, pédagogue et certifié dans son domaine
Méthode pédagogique
La formation est constituée d’apports théoriques et d’exercices pratiques. Chaque stagiaire dispose d’un poste de travail et la gestion en petit groupe (jusqu’à 8 stagiaires) permet un suivi individualisé et adapté. Durant les sessions de formation, un support pédagogique est remis aux stagiaires.
Suivi, évaluation, sanction
Des tours de table permettent de suivre la progression du stagiaire au fur et à mesure de la formation. Un suivi de la formation est réalisé par une feuille de présence émargée par demi-journée par les stagiaires et le formateur. Un questionnaire de satisfaction et une validation des acquis sont complétés par chaque stagiaire en fin de formation.
Formation sans certification.
Plan du cours
Introduction à HTML5
- (nouveau Doctype, nouveaux éléments sémantiques, audio, video, canvas, géolocalisation, drag and drop)
Introduction à CSS3
- (propriétés, sélecteurs, préfixes, médias, transitions, transformations, Internet Explorer)
Syntaxe, préfixes et usages CSS3
- Doit-on utiliser CSS3 en production aujourd'hui ?
- Préfixes : liste et utilité
- Syntaxe particulière à CSS3
Valeurs, fonctions et unités
- La transparence avec RGBa et HSLa
- Les variables calc(), min() et max()
- Nouvelles unités (rem, vw, vh, vm, deg, rad, s)
- Compatibilités navigateurs
La gestion des médias avec Media-Queries
- Syntaxe et médias
- Valeurs
Propriétés de texte et de contenu
- word-wrap
- text-overflow
- overflow-x, overflow-y
Propriétés décoratives CSS3
- @font-face
- border-radius
- box-shadow
- background-size
- Arrière-plans multiples
- Dégradés linéaires et radiaux (gradient)
Le positionnement en CSS3
- box-sizing
- multi-colonnes
- Modèle de boîte flexible (flexbox model)
- template layout
- grid layout
- CSS3 Regions, Shapes et Exclusions
La sélection d'éléments en CSS3
- Sélecteur d'adjacence général
- Sélecteur d'attribut
- Pseudo-classes générales
- (:lang, :empty, :target, :nth-child, :nth-of-type, :only-child, :not,…)
- Pseudo-classes de formulaire
- (:valid, :invalid, :checked, :required, :optional,…)
Les transformations
- Rotation
- Zoom avec scale
- Translation avec translate
- Déformations avec skew et matrix
Les transitions et animations
- Propriétés : property, duration, delay, timing-function
- Accélération
- Propriétés supportées
- Animer avec keyframes