L'intégration en Responsive Web Design
ERROR
00:00
00:00

TUTO L'intégration en Responsive Web Design

Carl Brison
29,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Chapitre 1 : Le Responsive
13m01s
 
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
24m06s
 
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
45m58s
 
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
30m55s
 
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
24m37s
 
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
43m10s
 
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
115
Apprenants
23
Commentaires
4,9/5
Note moyenne
5/5
22
4/5
0
3/5
0
2/5
0
1/5
1
Aytcheré Dieudonné Dakpo
Aytcheré Dieudonné Dakpo
Publié le 09/11/2023
Merci beaucoup pour ce beau travail; en général j'ai plus que apprecié et grâce ces tp j'ai gagné énormement en connaissance sur les media-query... je suis très satisfait !!!
Carl Brison
Carl Brison
C'est très gentil, merci beaucoup ;-)
Alain Tardif
Alain Tardif
Publié le 03/01/2023
Merci, j'ai vraiment eu beaucoup de plaisir à faire cette formation. Les TP sont intéressants et monte en puissance. Carl maîtrise parfaitement le sujet. J'ai appris, révisé et découvert des techniques. Passionnant. Validé 100 % responsive. 👍
Carl Brison
Carl Brison
Je suis très heureux d'être à l'origine de votre progression. Merci beaucoup pour votre commentaire très gentil ;-)
Cédric Leman
Cédric Leman
Publié le 21/08/2021
Mouais j'attendais quelque chose de moins parfait suis déçu on comprend tout, où est le plaisir de se torturer la tête si tout est fait a la perfection comme Carl et ses cours. :P
Carl Brison
Carl Brison
Excellent ;-) Merci beaucoup pour votre commentaire

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, HTML 5

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.

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données