Intégration d'une Landing page Responsive
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Intégration d'une Landing page Responsive

Adrien Gazaix
13,99€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Leçon 2
Structure HTML pour le Header
Leçon 3
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
Leçon 5
Structure HTML de la partie gauche de la Landing Page
Leçon 6
Appliquer le CSS sur la partie gauche de la Landing Page
Leçon 7
Structure HTML de la partie droite de la Landing Page

Plan détaillé du cours

Leçon 1Introduction & tour d'horizon des fichiers fournis
03m49
Leçon 2Structure HTML pour le Header
05m39
Leçon 3Mise en place du CSS global : variables, body, liens, titres...
11m51
Leçon 4Appliquer le CSS au Header pour le styliser comme sur la maquette
10m17
Leçon 5Structure HTML de la partie gauche de la Landing Page
08m03
Leçon 6Appliquer le CSS sur la partie gauche de la Landing Page
24m09
Leçon 7Structure HTML de la partie droite de la Landing Page
03m37
Leçon 8Appliquer le CSS sur la partie droite de la Landing Page
10m48
Leçon 9Ajouter un effet de Blur rose sur le fond du site uniquement en CSS
05m25
Leçon 10Adapter le site en Responsive grâce aux media queries
14m25
Leçon 11Mise en place du menu en version mobile
08m
Leçon 12Apparition du menu avec jQuery & Conclusion
07m17

Aperçus

Avis des apprenants

Détail des avis
72
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Eric Reynaud
Eric Reynaud
Publié le 03/05/2024
Merci Adrien ! Tuto vraiment génial. J'apprends beaucoup en suivant tes formations ! À bientôt, Eric
Chrystelle Langlais
Chrystelle Langlais
Publié le 14/08/2022
Encore un super tuto très clair et bien expliqué ! Merci beaucoup !
Adrien Gazaix
Adrien Gazaix
De rien merci pour ton retour 😁
Flash Dantz
Flash Dantz
Publié le 17/06/2022
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 !
Adrien Gazaix
Adrien Gazaix
Merci a toi d'avoir suivi cette formation et content qu'elle t'ai permis de te remettre ds le bain du code 😉

Vos questions sur le cours

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

Payer plus tard

Prix d'achat : 13,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données