Informatique

Bonjour,

Actuellement, en formation de développeur Web full stack, nous avons commencé à apprendre le responsive design pour que nos sites web s’adaptent à n’importe quel types d’écrans.

Pour tout avouer, je ne comprends rien du tout au Responsive et j’aurais aimé avoir des conseils si vous avez des tuto ou des vidéos à me conseiller pour que je comprenne rapidement car c’est vraiment important pour la suite de la formation.

Je vous remercie d’avance pour vos réponses.

Salut,

Tu l'as dis toi même : " le responsive design pour que nos sites web s’adaptent à n’importe quel types d’écrans."

Je suppose que tu viens de commencer ta formation ? Si c'est le cas ne t'inquiètes pas on te montreras comment faire.

Pour te donner une idée:
Lorsque tu réalises tes maquettes, tu le fais sur plusieurs formats d'écran ( mobile, écran d'ordinateur et pourquoi pas tablette).
Quand tu finis tes maquettes, tu passeras à l'intégration en HTML / CSS.
Tu devras décider si tu commences par écrire ton code CSS en mobile puis en desktop ( ce que je te conseilles et on appel ça "mobile first").
Tu utiliseras les Média querries en CSS pour adapter ton code sur plusieurs formats.
Voilà un lien d'Openclassrooms : https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061510-utilisez-le-responsive-design-avec-les-media-queries , j'ai pris le 1er lien qui parlé des média queries.

Les flex box sont très utilisé en responsive design, tu peux jouer sur leur orientation suivant la taille de l'cran avec les media queries, tu peux faire en sorte que ça passe à la ligne automatiquement, etc ...

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://developer.mozilla.org/fr/docs/Web/CSS/CSS_media_queries/Using_media_queries