Bundle Formation WEBDESIGNER : Créer un site OnePage dynamique & responsive
-31% de réduction
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.
Table des matières de cette formation HTML, Bootstrap, jQuery (durée : 6h18m)
-
Introduction & Préparation
- Déroulement de la formation 00:12:54
- Préparation des fichiers html, css et javascript 00:23:12
-
Section ACCUEIL
- Structure HTML/CSS & positionnement du logo 00:20:14
- Effet de parallax sur le background & bouton de scroll en jQuery 00:22:56
-
Création du MENU
- Structure du menu & style css pour le positionner en fixed 00:21:29
- Animation & fonctionnement OnePage du menu en jQuery 00:13:43
-
Section A PROPOS
- Structure HTML/CSS & colonnes Bootstrap 00:24:13
-
Section NOTRE EQUIPE
- Structure HTML/CSS, apparition d'un texte au survol & effets d'opacité sur des images 00:38:03
- Effet 3D au survol en jQuery 00:07:01
-
Section DEVISE
- Structure HTML/CSS & effet parallae 00:11:42
-
Section NOS OEUVRES D'ART
- Structure HTML/CSS & images responsives 00:17:37
- Mise en place du slider pour faire défiler les oeuvres d'art 00:28:52
- Mise en place d'une Lightbox pour visionner les photos par dessus le site 00:09:53
-
Section CONTACT
- Footer du site avec les coordonnées & une modale pour ouvrir les mentions légales 00:32:44
-
Rendre le site RESPONSIVE
- Rendre le site responsive mobile/tablette grâce à Bootstrap et aux Media Queries 00:29:10
- Création du menu responsive avec effet d'apparition en slideDown 00:31:19
-
Animations & Conclusion
- Rajouter des animations au scroll afin de rendre notre site plus dynamique 00:26:38
- Conclusion 00:06:42
- Fichiers sourcestélécharger
- Certificat
Formateur : Adrien Gazaix
-
Un cours que l'on suit avec facilité tant les explications sont limpides et cohérentes. Il faut passer du temps pour connaître les liens et l'utilité des nombreux composants de Boostrap et jQuery. Affinity Designer est plus intuitif que Photoshop. Merci pour ce partage professionnel. Je serais ravi de participer au 3e volet avec Word Press. J'ai des connaissances sur Joomla mais pas sur Word Press. Je serais enthousiaste de découvrir Word Press. Merci, merci
-
Clair, complet et efficace. Le formateur est tres pédagogue. Merci beaucoup !
-
C'est toujours un plaisir de découvrir les Tutos d'Adrien Gazaix, c'est extrêmement bien expliqué , il prend le temps de reprendre des choses déjà vu des rappels vraiment bienvenue. J’espère voir un nouveau tutoriel du même type bientôt sur tuto.com. C'est tendance actuel et on écoute clairement les vidéos. Merci
-
Avec quelles versions de logiciels ce tuto est-il compatible ?HTML 5, Bootstrap 4, Bootstrap 3, jQuery
-
Quel est le niveau requis pour suivre ce tuto ?débutant
-
Que contient le fichier source ?Le Webdesign du site bureau/mobile + l'intégration de départ + liste des plugins utilisés + le TEMPLATE COMPLET du site créé dans la formation.
note moyenne
avis laissés