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 !
Table des matières de cette formation HTML, CSS, jQuery (durée : 1h53m)
-
- Introduction & tour d'horizon des fichiers fournis gratuit 00:03:49
- Structure HTML pour le Header 00:05:39
- Mise en place du CSS global : variables, body, liens, titres... 00:11:51
- Appliquer le CSS au Header pour le styliser comme sur la maquette 00:10:17
- Structure HTML de la partie gauche de la Landing Page 00:08:03
- Appliquer le CSS sur la partie gauche de la Landing Page 00:24:09
- Structure HTML de la partie droite de la Landing Page 00:03:37
- Appliquer le CSS sur la partie droite de la Landing Page 00:10:48
- Ajouter un effet de Blur rose sur le fond du site uniquement en CSS 00:05:25
- Adapter le site en Responsive grâce aux media queries 00:14:25
- Mise en place du menu en version mobile 00:08:00
- Apparition du menu avec jQuery & Conclusion 00:07:17
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Formation très claire et facile à suivre. Elle m'a permis de me remettre dans le bain du CSS et du HTML après quelques années sans pratique. Merci !
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML , CSS , jQuery
-
Que contient le fichier source ?La maquette Figma, les fichiers pour commencer le tuto en même temps que le formateur, et bien sûr l'intégration finale.
-
Quel est le niveau requis pour suivre ce tuto ?intermédiaire
note moyenne
avis laissé