A l’issue de cette formation, vous serez capable de :

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

Jour 1 - Matin

Rappel sur les CSS

• Règles de priorités
• Sélecteurs
• Simples
• Composés
• Propriétés des boîtes
• Box-sizing
• Position...
• Unités
• Absolue
• Relatives
• Couleurs et filtres

Les écrans

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

HTML

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

Exemple de travaux pratiques (à titre indicatif)

• Développer une page fidèle à un modèle fourni

Jour 1 - Après-midi

Les modes de positionnement

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

Jour 2 - Matin

Responsive Design

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

Exemple de travaux pratiques (à titre indicatif)

• Développer une page a l'aide de Grid et Flexbox

Jour 2 - Après-midi

Les Media Queries

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

Les animations et transitions

• Définition des animations
• Images clés

Cas particuliers

• Textes
• Images
• Mixblend et images de fond
• Images HiDPI / WebP / AVIF
• Balises et
• Les images vectorielles (SVG)