CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre le Responsive Design - en HTML5 et CSS3

Réalisation d'une page en Responsive Web Design

Retour à la formation
Chapitre 7 Leçon 1
Précédent
Suivant

Résumé court de la leçon sur la création d'une page en Responsive Web Design, avec un focus sur les feuilles de style pour smartphones.

Détails de la leçon

Description de la leçon

Dans cette leçon, vous apprendrez à créer une page en Responsive Web Design, en vous concentrant particulièrement sur la partie relative aux feuilles de style pour les smartphones. En partant d'une maquette Photoshop, nous allons intégrer les différents éléments graphiques à une page HTML. La leçon couvrira des aspects tels que l'utilisation des balises HTML, l'application de styles spécifiques aux smartphones et la gestion des images et autres éléments de contenu. Vous découvrirez également comment masquer certains éléments pour les plus petits écrans et comment adapter la mise en page pour les tablettes et les écrans plus grands. Cette leçon vous guidera étape par étape, avec des astuces pour éviter les erreurs courantes et optimiser votre workflow. La mise en forme appropriée sera expliquée en détail, y compris comment utiliser des unités comme EM et travailler avec des pourcentages pour assurer une mise en page fluide et responsive.

Objectifs de cette leçon

À la fin de cette vidéo, vous serez capable de :
- Créer une page en Responsive Web Design adaptée aux smartphones.
- Intégrer une maquette Photoshop en HTML et CSS.
- Utiliser des unités EM et des pourcentages pour la mise en page.
- Optimiser la mise en forme pour différents dispositifs.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et CSS, ainsi qu'une expérience de travail avec Photoshop.

Métiers concernés

Cette vidéo est pertinente pour les métiers suivants :
- Développeur Web
- Designer UX/UI
- Intégrateur Web

Alternatives et ressources

Comme logiciels ou solutions alternatives, vous pouvez utiliser Sketch ou Figma à la place de Photoshop pour la création de maquettes, et Bootstrap ou Foundation pour accélérer le développement de pages responsives.

Questions & Réponses

Les unités EM permettent de créer des tailles relatives qui s'adaptent mieux aux différents dispositifs, facilitant ainsi la lecture sur divers écrans.
Pour convertir des pixels en pourcentages, on divise le nombre de pixels de l'élément par la largeur totale du conteneur, puis on multiplie par 100.
Tester sur différents dispositifs garantit une expérience utilisateur cohérente et optimise la performance et l'apparence du site sur tous les écrans.