-31% de réduction
Au moment où je créé cette formation, les sites Web sont consultés à plus de 50% par des téléphones mobiles, à 7% par des tablettes et à plus de 40% par des ordinateurs. Cet usage grandit au fur et à mesure des mois (+ 10% de visite via des smartphones entre janvier 2017 et décembre 2017 en France).
Il est donc important pour chaque site, d’adapter son contenu et la disposition de celui-ci en fonction de la taille de l’écran qui l’affiche. C’est ce qu’on appelle le Responsive Web Design.
Au programme de cette formation dédiée au Responsive Design
Cette formation complète a pour but de vous former au responsive design en abordant toutes les notions importantes de celui-ci :
- Utilisation des media queries pour modifier la disposition des éléments en fonction de la taille de l’écran de notre visiteur.
- Découverte de l’utilisation des unités relatives pour avoir un site qui s’adapte parfaitement à son environnement et qui reste accessible aux malvoyants.
- Adaptation des textes pour garder une lisibilité maximale peu importe le support.
- Modification des sources des images de notre design en fonction de la taille de l’écran du visiteur.
- Des médias flexibles qui s’adapte parfaitement à chaque disposition de notre design.
- Découverte du Mobile first qui consiste à d’abord s’occuper de la disposition de nos éléments sur les plus petits écrans (smartphones) pour ensuite évoluer vers des écrans de plus en plus grands. Les smartphones étant moins puissant que nos ordinateurs, il est important de réduire au maximum leur travail durant le rendu de notre page.
- Découverte du module de disposition Flexbox de CSS 3 afin de créer une grille responsive pour vos futurs projets Web.
Pour que cette formation soir réellement complète, nous viendrons réaliser une landing page responsive complète dont vous pouvez voir le résultat dans la vidéo d’introduction de la formation et dans la galerie d’images un peu plus bas.
Cette formation est accessible à toute personne ayant une première expérience avec les langages HTML et CSS. J’ai d'ailleurs créé une formation à ce sujet qui est disponible juste ici.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Un QCM est disponible pour valider vos nouvelles compétences.
Les fichiers sources sont fournis avec le cours.
Table des matières de cette formation CSS, HTML (durée : 2h43m)
-
Ce qu'il faut savoir
- Introduction gratuit 00:04:03
- Le responsive design 00:04:11
- Le document HTML de base 00:03:56
- Media types et media queries 00:08:18
- Utiliser les unités relatives 00:06:06
- Organiser un projet avec le mobile first 00:05:50
- Gérer les textes 00:07:59
- Des médias flexibles 00:04:11
- Des images adaptatives 00:18:47
- Initiation à Flexbox 00:08:30
- Créer une grille responsive avec Flexbox 00:31:37
-
Cas concret : Une landing page responsive
- Préparation de notre projet 00:08:22
- Le header 00:23:11
- Les compétences 00:10:39
- Le formulaire d'abonnement à la Newsletter 00:10:51
- Le footer 00:06:26
- Conclusion 00:01:02
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Steven Sil
-
Formateur hyper clair !
-
Très bonne pédagogie, très claire.
-
Un excellent tuto que j'ai acheté les yeux fermés. Steven est toujours au top. Merci
-
Avec quelles versions de logiciels ce tuto est-il compatible ?CSS 3, HTML 5
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissés