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
Cette leçon couvre la transformation d'une maquette Photoshop en une page web responsive destinée aux écrans d'ordinateurs. Vous apprendrez à utiliser des requêtes média pour adapter le contenu selon la taille de l'écran, à travailler avec des unités relatives comme les pourcentages et les em, et à utiliser des propriétés CSS spécifiques pour styliser les éléments de manière appropriée. Nous aborderons également la gestion des arrières-plans et des images contextuelles, ainsi que les ajustements nécessaires pour assurer une continuité entre les différentes feuilles de style selon les tailles d'écran.
Objectifs de cette leçon
Les objectifs de cette vidéo sont d'apprendre à :
- Adapter une maquette Photoshop en page web responsive.
- Utiliser les requêtes média CSS pour des affichages multiples.
- Calculer les dimensions en pourcentages et les intégrer dans le CSS.
- Personnaliser les styles selon les tailles d'écran.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est nécessaire de maîtriser :
- Les bases de HTML et CSS.
- Les concepts de Responsive Web Design.
- Les outils de design, notamment Photoshop.
Métiers concernés
Les compétences acquises peuvent être appliquées dans des métiers tels que :
- Développeur front-end.
- Designer web.
- Intégrateur web.
- Consultant en UX/UI Design.
Alternatives et ressources
Comme alternatives, vous pouvez utiliser :
- Sketch ou Figma pour la conception de maquettes.
- Les frameworks CSS tels que Bootstrap ou Foundation pour faciliter le Responsive Design.
Questions & Réponses
Je m'abonne