Apprendre à réaliser un Menu Responsive multi niveaux
Apprendre à réaliser un Menu Responsive multi niveaux
Bienvenue à tous dans cette formation vidéo de plus de 6h consacrée entièrement à l’intégration d’une maquette web grâce au HTML, CSS & jQuery.
Au programme de ce tuto Intégration d'un site OnePage Responsive
Ce tuto a pour but de créer ensemble un template de site professionnel utilisable facilement, et responsive sur les versions tablettes & mobiles grâce au framework gratuit Bootstrap.
Le tout sera animé par des effets de parallaxe, un slider, une lightbox responsive ainsi que des animations qui se lanceront en fonction de la position du scroll.
Vous serez alors autonome dans la création de votre propre site web One Page, et vous pourrez le faire évoluer simplement en fonction de votre activité professionnelle.
Je vous invite à regarder l’extrait vidéo pour vous rendre compte du résultat final.
A Noter :
La première partie de cette formation, portant sur le webdesign de la maquette sur Affinity Designer n’est pas obligatoire pour suivre ce tuto.
Vous trouverez dans les sources tout ce dont avez besoin pour suivre la formation dans de bonnes conditions :
- Le webdesign des maquettes web & mobile
- Un dossier de départ pour commencer l’intégration en même temps que la vidéo
- Une liste des plugins utilisés et des sites visités au cours de la formation, avec leurs liens respectifs
- Le template du site complet (testé et fonctionnel sur bureau, tablette & mobile)
Je reste bien évidemment disponible dans le salon d’entraide pour toutes les questions que vous pourriez avoir, pendant ou après la formation.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction & Préparation
Introduction & Préparation
Chapitre 2
Section ACCUEIL
Section ACCUEIL
Chapitre 3
Création du MENU
Création du MENU
Chapitre 4
Section A PROPOS
Section A PROPOS
Chapitre 5
Section NOTRE EQUIPE
Section NOTRE EQUIPE
Chapitre 6
Section DEVISE
Section DEVISE
Chapitre 7
Section NOS OEUVRES D'ART
Section NOS OEUVRES D'ART
Plan détaillé du cours
Chapitre 1 : Introduction & Préparation
36m06
Leçon 1Déroulement de la formation
Leçon 2Préparation des fichiers html, css et javascript
Chapitre 2 : Section ACCUEIL
43m10
Leçon 1Structure HTML/CSS & positionnement du logo
Leçon 2Effet de parallax sur le background & bouton de scroll en jQuery
Chapitre 3 : Création du MENU
35m12
Leçon 1Structure du menu & style css pour le positionner en fixed
Leçon 2Animation & fonctionnement OnePage du menu en jQuery
Chapitre 4 : Section A PROPOS
24m13
Leçon 1Structure HTML/CSS & colonnes Bootstrap
Chapitre 5 : Section NOTRE EQUIPE
45m04
Leçon 1Structure HTML/CSS, apparition d'un texte au survol & effets d'opacité sur des images
Leçon 2Effet 3D au survol en jQuery
Chapitre 6 : Section DEVISE
11m42
Leçon 1Structure HTML/CSS & effet parallae
Chapitre 7 : Section NOS OEUVRES D'ART
56m22
Leçon 1Structure HTML/CSS & images responsives
Leçon 2Mise en place du slider pour faire défiler les oeuvres d'art
Leçon 3Mise en place d'une Lightbox pour visionner les photos par dessus le site
Chapitre 8 : Section CONTACT
32m44
Leçon 1Footer du site avec les coordonnées & une modale pour ouvrir les mentions légales
Chapitre 9 : Rendre le site RESPONSIVE
1h29
Leçon 1Rendre le site responsive mobile/tablette grâce à Bootstrap et aux Media Queries
Leçon 2Création du menu responsive avec effet d'apparition en slideDown
Chapitre 10 : Animations & Conclusion
33m20
Leçon 1Rajouter des animations au scroll afin de rendre notre site plus dynamique
Leçon 2Conclusion
Aperçus
Avis des apprenants