JS moderne, EXO #17, Créer une page de vente
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h30
de formation
12
leçons vidéo
1
chapitre
Débutant
niveau requis
Carl Brison
Carl Brison
Formateur certifié

JS moderne, EXO #17, Créer une page de vente

4.8/5 Trustpilot (1385 avis) Satisfait ou remboursé
1h30
de formation
12
leçons vidéo
1
chapitre

Dans ce tuto dédié à la pratique du développement frontend moderne, nous allons nous amuser à réaliser une page de vente qui devra offrir une expérience utilisateur intéressante. Le but étant de rassurer l'internaute en proposant une page de vente de qualité.
Pour cela nous allons mettre en place les points suivants :

  • La page de vente devra être 100% responsive. Pour cela nous utiliserons les flexbox.
  • Nous installerons des vignettes qui devront s'afficher en grande image lorsque l'utilisateur passera le pointeur de sa souris dessus. Pour cela nous utiliserons le JavaScript moderne ainsi que les flexbox.
  • Nous n'autoriserons pas la validation du formulaire (qui sera ici un ajout au panier), si l'utilisateur n'a pas choisi une taille parmi celles proposées dans un menu déroulant. Pour cela nous utiliserons le JavaScript moderne.
  • Nous afficherons une page par-dessus la page courante, lorsque l'utilisateur cliquera sur un lien afin de voir un guide des tailles. Ce guide des tailles possédera un bouton qui permettra de quitter la fenêtre courante pour se retrouver sur le guide des tailles.

Pour suivre ce tutoriel dans de bonnes conditions, il est recommandé de connaître :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place des bases de la page web
Leçon 2
Mise en forme de la section gauche
Leçon 3
Création du script d'affichage des vignettes
Leçon 4
Mise en structure de la section droite
Leçon 5
Mise en forme de la section droite
Leçon 6
Création du fichier traitement.html
Leçon 7
Contrôle du formulaire en JavaScript

Table des matières

Leçon 1

Mise en place des bases de la page web

11m07
Leçon 2

Mise en forme de la section gauche

06m54
Leçon 3

Création du script d'affichage des vignettes

05m30
Leçon 4

Mise en structure de la section droite

09m39
Leçon 5

Mise en forme de la section droite

14m07
Leçon 6

Création du fichier traitement.html

02m09
Leçon 7

Contrôle du formulaire en JavaScript

11m13
Leçon 8

Mise en structure de la fenêtre guide des tailles

04m27
Leçon 9

Mise en forme de la fenêtre guide des tailles

12m58
Leçon 10

Fonctionnement de la fenêtre guide des tailles

07m25
Leçon 11

Correction d'un petit problème

01m39
Leçon 12

Conclusion

02m55

Aperçus

Avis des apprenants

Détail des avis
6
Commentaires
5/5
Note moyenne
5/5
6
4/5
0
3/5
0
2/5
0
1/5
0
Fred Andenas
Fred Andenas
Publié le 19/05/2026
Ton tuto c'est Concevoir une partie du front-end d'une petite boutique Marketplace. merci Carl pour l'initiation.
Simon Costa
Simon Costa
Publié le 05/02/2026
Petit cours bien sympa. Perso ça m'a fait réviser les tableaux en html :D . Merci Carl :D .
Carl Brison
Carl Brison
Merci beaucoup Simon ;-)
Jean-Philippe Mouzet
Jean-Philippe Mouzet
Publié le 14/03/2025
Bon, maintenant, y'a plus qu'à trouver des produits à vendre ;-) et de trouver un développeur Back-End ;-)
Carl Brison
Carl Brison
Peut-être vous demain ! Merci beaucoup pour votre commentaire ;-)

Vos questions sur le cours

Que contient le fichier source ?

Le code source complet de ce tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
17,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h30 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 754 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1421 tutos gratuits

Notre politique de protection des données