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 !
Table des matières de cette formation HTML, CSS, jQuery (durée : 4h36m)
-
- Partie 1 00:21:24 20 crédits
- Partie 2 00:14:07 20 crédits
- Partie 3 00:46:41 20 crédits
- Partie 4 00:32:11 20 crédits
- Partie 5 00:56:31 20 crédits
- Partie 6 00:10:06 20 crédits
- Partie 7 00:18:12 20 crédits
- Partie 8 00:31:16 20 crédits
- Partie 9 00:36:01 20 crédits
- Partie 10 00:09:46 20 crédits
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Bonjour merci pour ce tuto. Cela me permet de réactualiser mes connaissances.
-
Super tuto, et qui donne pas mal d'idée pour les projets persos. Merci encore !
-
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
-
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
note moyenne
avis laissés