L'intégration en Responsive Web Design
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
3h01
de formation
31
leçons vidéo
6
chapitres
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

L'intégration en Responsive Web Design

4.8/5 Trustpilot (1387 avis) Satisfait ou remboursé
3h01
de formation
31
leçons vidéo
6
chapitres

Vous êtes concepteur de sites Internet et vous souhaitez améliorer vos connaissances dans le Responsive Web Design ?
Vous rêvez de devenir concepteur de sites Internet professionnels ?
Alors ce tuto est fait pour vous !

Les connaissances que je dispense dans ce tuto vous seront indispensables afin de pouvoir mener à bien la conception de sites Internet professionnels.
IMPORTANT : Pour pouvoir suivre sereinement ce tuto, vous devez connaître la mise en page CSS3 par les Flexbox. Si tel n'est pas le cas, je mets à votre disposition divers cours sur l'apprentissage des flexbox :

 

Au programme de ce cours sur le Responsive Web Design

Dans ce tuto en vidéo consacré à l'intégration responsive, nous allons aborder la technologie CSS qui nous permet de rendre facilement un site web adapté au support qui le visualise.
Cette technologie qui s'appelle les medias queries est relativement simple à comprendre et il y a peu de chose à savoir. En revanche, il faut mettre l'accent sur la pratique !
Ce tuto est donc axé sur la pratique de cette technologie afin de faire de vous un véritable professionnel au niveau Front-end !

Je ferais appel à vos connaissances sur les flexbox afin de résoudre un certain nombre de difficultés !
Ce tuto abordera les 2 pratiques sur la conception de site Internet : le mobile first ainsi que le desktop first.

A la fin de ce tuto, vous serez parfaitement apte à réaliser en quelques minutes seulement, la mise en page d'un site Internet simples comme complexes.

  • Un QCM est fourni en fin de cours afin de valider vos compétences.
  • Des fichiers de travail sont mis à votre disposition.
  • Enfin, un salon d'entraide est à votre disposition si vous avez des questions relatives au tuto.

Bonne formation !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Le Responsive
Chapitre 2
Mobile-first : 1er exemple
Chapitre 3
Mobile-first : 2ème exemple
Chapitre 4
Desktop first : 1er exemple
Chapitre 5
Desktop first : 2ème exemple
Chapitre 6
Mobile First Vs Desktop First

Table des matières

Chapitre 1 : Le Responsive

13m01
 
Leçon 1Présentation
Leçon 2Le viewport
Leçon 3Les points de ruptures
Leçon 4Les medias queries
Leçon 5Le mobile first

Chapitre 2 : Mobile-first : 1er exemple

24m06
 
Leçon 1Mise en place de la structure HTML
Leçon 2Mise en place du CSS pour les smartphones
Leçon 3Mise en place du CSS pour les ordinateurs

Chapitre 3 : Mobile-first : 2ème exemple

45m58
 
Leçon 1Mise en place de la structure HTML
Leçon 2Mise en place du CSS pour les smartphones 1/2
Leçon 3Mise en place du CSS pour les smartphones 2/2
Leçon 4Mise en place du CSS pour les tablettes
Leçon 5Mise en place du CSS pour les ordinateurs

Chapitre 4 : Desktop first : 1er exemple

30m55
 
Leçon 1Présentation du desktop first
Leçon 2Mise en place de la structure HTML
Leçon 3Mise en place du CSS pour les ordinateurs
Leçon 4Mise en place du CSS pour les smartphones 1/2
Leçon 5Mise en place du CSS pour les smartphones 2/2

Chapitre 5 : Desktop first : 2ème exemple

24m37
 
Leçon 1Mise en place de la structure HTML
Leçon 2Mise en place du CSS pour les ordinateurs
Leçon 3Mise en place du CSS pour les tablettes
Leçon 4Mise en place du CSS pour les smartphones

Chapitre 6 : Mobile First Vs Desktop First

43m10
 
Leçon 1Mobile First ou Desktop First ?
Leçon 2Desktop First : la structure HTML
Leçon 3Desktop First : le CSS pour les ordinateurs
Leçon 4Desktop First : le CSS pour les tablettes
Leçon 5Desktop First : le CSS pour les smartphones
Leçon 6Mobile First : le CSS pour les smartphones
Leçon 7Mobile First : le CSS pour les tablettes
Leçon 8Mobile First : le CSS pour les ordinateurs
Leçon 9Conclusion

Aperçus

Avis des apprenants

Détail des avis
442
Apprenants
33
Commentaires
4,9/5
Note moyenne
5/5
32
4/5
0
3/5
0
2/5
0
1/5
1
Tom Gallier
Tom Gallier
Publié le 29/08/2026
comprehension super simple, plusieurs cas pratique pour bienassimilé les differentes mise en page etc, super cours
Carl Brison
Carl Brison
Merci beaucoup, c'est super gentil ;-)
Fred Andenas
Fred Andenas
Publié le 02/12/2025
tuto simplement présenté malgré la richesse proposée
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Marc Le Person
Marc Le Person
Publié le 25/11/2025
Vulgarisation parfaite ce tuto démystifie pour moi la complexité supposé de cette technologie. Un Grand Merci.
Carl Brison
Carl Brison
Merci beaucoup, c'est super gentil ;-)

Vos questions sur le cours

Que contient le fichier source ?

Toutes les sources du tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Très interessant mais une question, j'ai fait dernièrement une formation Outlook 2016, mais le seul reproche c'est que l'on peut que regarder les vidéos on ne peut pas les télécharger sur son PC. Alors difficile de suivre un cours sur plus de 70 vvidéos ou avoir une bonne mémoire perso. J'y ai passé 3 semaines il il me reste rien. Alors votre cours de formation est il le même système ? Cordialement Louis progeas.l@wanadoo.fr

Bonjour, Comme précisé sur la fiche description, les fichiers de travail sont mis à votre disposition. Il est certain que si on se contente juste d'écouter, sans jamais pratiquer, il est difficile de se rappeler de ce que l'on a appris. Pour progresser je vous conseille : de faire une petite fiche où vous y notez les points essentielles, puis de tenter de faire par vous même les exemples proposés ou bien ceux de votre choix. Gardez bien ceci à l'esprit : en informatique, le secret c'est la pratique ! Enfin et pour clore ma réponse, ce tuto demande d'avoir des connaissances dans les flexbox. Si vous n'avez pas ces connaissances, je vous conseille de les acquérir afin de pouvoir suivre facilement ce tuto qui vous donnera toute la dextérité pour pouvoir réaliser très facilement des mises en page responsives de site internet.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
28,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
3h01 de vidéo • 6 chapitres
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 759 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1422 tutos gratuits

Notre politique de protection des données