Introduction video
Principes généraux
Réaliser une maquette en responsive Design
Maitriser l'intégration en Responsive Design
Le travail des textes
Intégrer des images optimisées
Une réalisation complète
Connaissances complémentaires
Conclusion
Détails de la leçon
Description de la leçon
Dans cette leçon, vous apprendrez à utiliser les Media Queries pour développer un site web adaptable à différentes tailles d'écran, telles que les smartphones, les tablettes et les ordinateurs de bureau. Nous commencerons par les bases de la déclaration de Media Queries et illustrerons avec un exemple pratique. Vous découvrirez comment modifier la couleur de fond d'une page selon que la taille de l'écran soit inférieure ou supérieure à 501 pixels. Ensuite, nous explorerons l'usage des Media Queries dans une feuille de style externe pour séparer les styles de base des styles spécifiques aux grands écrans. Enfin, vous comprendrez l'importance du phénomène de cascade et comment il permet de simplifier et optimiser vos feuilles de style CSS. Cette approche vous aidera à créer des sites web plus flexibles et maintenables.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de :
1. Apprendre à utiliser les Media Queries pour adapter les styles en fonction de la taille de l'écran.
2. Illustrer l'usage pratique des Media Queries avec des exemples.
3. Introduire le concept du phénomène de cascade en CSS pour optimiser les feuilles de style.
Prérequis pour cette leçon
Pour suivre cette vidéo, vous devez avoir une connaissance de base en HTML et CSS ainsi qu'une compréhension élémentaire du modèle de box en CSS.
Métiers concernés
Les compétences abordées dans cette leçon sont essentielles pour les métiers suivants :
- Développeur Front-end
- Concepteur UI/UX
- Intégrateur Web
Alternatives et ressources
Il existe d'autres techniques et frameworks tels que Bootstrap et Foundation qui peuvent faciliter la création de designs responsives sans écrire manuellement les Media Queries.
Questions & Réponses
Je m'abonne