Créer un site One Page complet de A à Z
ERROR
00:00
00:00

TUTO Créer un site One Page complet de A à Z

Adrien Gazaix
20,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce tuto vidéo HTML5, CSS3 et jQuery, nous allons voir ensemble, pas à pas, comment intégrer un site One Page de A à Z. Un site One Page n'a pas de rechargement de page et toute la navigation se fait grâce à un scroll fluide entre chaque rubrique. A la fin de cette formation, vous serez en mesure de créer un site complet qui peut être mis en ligne tout de suite.
Je vous propose de regarder l'extrait personnalisé de 10 minutes que j'ai réalisé pour vous rendre compte de ce que l'on va apprendre dans cette formation de 4h30.

Sommaire de la formation :

  • Découpage des images dans Photoshop : technique de découpage, formats d'images à choisir, création de sprites
  • Mise en place d'un slider de plusieurs images sur le background en full page
  • Intégration de la sidebar : logo, menu, réseaux sociaux, copyright & un bouton permettant de la cacher/montrer
  • Création des 3 rubriques + mise en place du système one page avec scroll entre les rubriques
  • Intégration de la partie "News" : Carousel responsive, déploiement d'une nouvelle sidebar pour lire le contenu de la news sélectionnée
  • Intégration de la partie "About Us" : Colonnes CSS3, blockquote personnalisé
  • Intégration de la partir "Contact" : Formulaire 3 champs, google map
  • Développement du formulaire en Ajax/PHP avec test d'envoi sur une boîte email
  • Création d'un lecteur MP3 personnalisé en jQuery
  • Ajout d'interactions avec les touches du clavier (cacher tout le contenu du site et mettre le site en pause, puis l'inverse) & aussi quelques conseils pour mettre en ligne le site créé (logiciel FTP, hébergement)

TOUT le site est inclus dans les sources, ainsi que l'intégration de départ pour vous permettre de suivre la formation dans les meilleurs conditions et refaire petit à petit le site one page en même temps que vous regardez la vidéo.
Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Partie 1
Leçon 2
Partie 2
Leçon 3
Partie 3
Leçon 4
Partie 4
Leçon 5
Partie 5
Leçon 6
Partie 6
Leçon 7
Partie 7

Plan détaillé du cours

Leçon 1Partie 1
21m24s
Leçon 2Partie 2
14m07s
Leçon 3Partie 3
46m41s
Leçon 4Partie 4
32m11s
Leçon 5Partie 5
56m31s
Leçon 6Partie 6
10m06s
Leçon 7Partie 7
18m12s
Leçon 8Partie 8
31m16s
Leçon 9Partie 9
36m01s
Leçon 10Partie 10
09m46s

Aperçus

Avis des apprenants

Détail des avis
1 003
Apprenants
77
Commentaires
4,8/5
Note moyenne
5/5
46
4/5
4
3/5
3
2/5
1
1/5
1
François-Joseph Dujeu
François-Joseph Dujeu
Publié le 12/11/2017
Bonjour merci pour ce tuto. Cela me permet de réactualiser mes connaissances.
Adrien Gazaix
Adrien Gazaix
Merci à toi et oui un piqûre de rappel c'est toujours intéressant pour se remettre à jour. Surtout que ça évolue très vite dans le monde du web, les langages utilisés... A bientôt pour de prochains tuto :)
Samih Bounouar
Samih Bounouar
Publié le 01/07/2016
Super tuto, et qui donne pas mal d'idée pour les projets persos. Merci encore !
Jean-Pierre Lannak
Jean-Pierre Lannak
Publié le 12/10/2015
5 sur 5 De JP71 J'adore ce tuto très clair, vraiment précis, avec beaucoup de jQuery , le tout trés bien expliquer...Que du bonheur. Merciiiiiiiii
Adrien Gazaix
Adrien Gazaix
Merci JP ;)

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

HTML 5, CSS 3, jQuery

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données