Créer un site OnePage Responsive - Partie 2 : L'INTÉGRATION
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Créer un site OnePage Responsive - Partie 2 : L'INTÉGRATION

Adrien Gazaix
39,00€
3 paiements de 13,00€ avec Klarna. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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
Chapitre 2
Section ACCUEIL
Chapitre 3
Création du MENU
Chapitre 4
Section A PROPOS
Chapitre 5
Section NOTRE EQUIPE
Chapitre 6
Section DEVISE
Chapitre 7
Section NOS OEUVRES D'ART

Plan détaillé du cours

Chapitre 1 : Introduction & Préparation
36m06s
 
Leçon 1Déroulement de la formation
Leçon 2Préparation des fichiers html, css et javascript
Chapitre 2 : Section ACCUEIL
43m10s
 
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
35m12s
 
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
24m13s
 
Leçon 1Structure HTML/CSS & colonnes Bootstrap
Chapitre 5 : Section NOTRE EQUIPE
45m04s
 
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
11m42s
 
Leçon 1Structure HTML/CSS & effet parallae
Chapitre 7 : Section NOS OEUVRES D'ART
56m22s
 
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
32m44s
 
Leçon 1Footer du site avec les coordonnées & une modale pour ouvrir les mentions légales
Chapitre 9 : Rendre le site RESPONSIVE
1h29s
 
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
33m20s
 
Leçon 1Rajouter des animations au scroll afin de rendre notre site plus dynamique
Leçon 2Conclusion

Aperçus

Avis des apprenants

Détail des avis
142
Apprenants
16
Commentaires
5/5
Note moyenne
5/5
16
4/5
0
3/5
0
2/5
0
1/5
0
Jacky Merteau
Jacky Merteau
Publié le 29/04/2020
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
Adrien Gazaix
Adrien Gazaix
Merci à toi, et la partie sur WordPress est dispo sur tuto.com ;)
Nicolas Quantin
Nicolas Quantin
Publié le 09/04/2020
Clair, complet et efficace. Le formateur est tres pédagogue. Merci beaucoup !
Adrien Gazaix
Adrien Gazaix
Merci beaucoup ! Et maintenant, en avant pour la suite sur WordPress ;)
Pierre Gb
Pierre Gb
Publié le 26/02/2020
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
Adrien Gazaix
Adrien Gazaix
Un grand merci pour ton commentaire ultra positif ! A bientôt pour de nouveaux tuto ;)

Vos questions sur le cours

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.

Payer plus tard ou en 3x

Prix d'achat : 39,00 €
Pour payer plus tard ou en plusieurs versements échelonnés, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez plus tard ou en plusieurs fois

3 paiements de 13,00 €
tous les mois, sans intérêts
Total : 39,00 €
Afficher les conditions : Klarna
Klarna : conditions d'utilisation du paiement différé en 3 échéances.

Attendez ! 🤗

Accédez à plus de 1357 tutos gratuits

Notre politique de protection des données