Découvrir les Variables en CSS avec 2 exemples concrets
Découvrir les Variables en CSS avec 2 exemples concrets
Dans cette formation HTML & CSS en vidéo, je vous propose de découvrir ensemble comment intégrer une maquette de Landing Page tout en restant Responsive tablette & mobile.
La maquette graphique que nous allons intégrer est fournie avec la formation.
Si vous souhaitez apprendre à designer cette Landing page sur le logiciel Figma, je vous invite à suivre le premier épisode disponible sur tuto.com
Aucun Framework tel que Bootstrap ne sera utilisé.
Nous utiliserons seulement les langages HTML & CSS ainsi que des techniques modernes d'intégration telles que la disposition des blocs grâce aux Flexbox ou bien l'utilisation des variables pour stocker les différents codes couleurs. Enfin, la librairie JQuery nous sera utile pour créer le menu en version mobile.
Les fichiers sources sont inclus avec le tuto : la maquette Figma, les fichiers de départ & l'intégration finale obtenue à la fin de la formation.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Leçon 1
Introduction & tour d'horizon des fichiers fournis
Introduction & tour d'horizon des fichiers fournis
Leçon 2
Structure HTML pour le Header
Structure HTML pour le Header
Leçon 3
Mise en place du CSS global : variables, body, liens, titres...
Mise en place du CSS global : variables, body, liens, titres...
Leçon 4
Appliquer le CSS au Header pour le styliser comme sur la maquette
Appliquer le CSS au Header pour le styliser comme sur la maquette
Leçon 5
Structure HTML de la partie gauche de la Landing Page
Structure HTML de la partie gauche de la Landing Page
Leçon 6
Appliquer le CSS sur la partie gauche de la Landing Page
Appliquer le CSS sur la partie gauche de la Landing Page
Leçon 7
Structure HTML de la partie droite de la Landing Page
Structure HTML de la partie droite de la Landing Page
Plan détaillé du cours
Leçon 1Introduction & tour d'horizon des fichiers fournis
03m49s
Leçon 2Structure HTML pour le Header
05m39s
Leçon 3Mise en place du CSS global : variables, body, liens, titres...
11m51s
Leçon 4Appliquer le CSS au Header pour le styliser comme sur la maquette
10m17s
Leçon 5Structure HTML de la partie gauche de la Landing Page
08m03s
Leçon 6Appliquer le CSS sur la partie gauche de la Landing Page
24m09s
Leçon 7Structure HTML de la partie droite de la Landing Page
03m37s
Leçon 8Appliquer le CSS sur la partie droite de la Landing Page
10m48s
Leçon 9Ajouter un effet de Blur rose sur le fond du site uniquement en CSS
05m25s
Leçon 10Adapter le site en Responsive grâce aux media queries
14m25s
Leçon 11Mise en place du menu en version mobile
08m
Leçon 12Apparition du menu avec jQuery & Conclusion
07m17s
Aperçus
Avis des apprenants