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 !
Avis des apprenants