$ 39.00

Tuto Créer un site OnePage Responsive - Partie 2 : L'INTÉGRATION avec HTML, Bootstrap, jQuery

$ 39.00

  • Une formation vidéo de 6h18m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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



Formateur : Adrien Gazaix

Adrien Gazaix a publié 121 tutoriels et obtenu une note moyenne de 4,8/5 sur 46 778 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

12
avis laissés
5 étoiles
12
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de grassel laissé le 12/10/2018
    Cela fait longtemps que je te suis et je te dois une bonne partie de ma progression dans le domaine, c'est l'occaz : . Merci ! Je suis toujours impressionné par la clarté du propos alors qu'il est si facile de s'y perdre : très pro. Quel est l'intérêt de migrer sur les versions actuelles des différents "cdn" utilisés, par prudence je dirais il faut mettre à jour ton avis ?
    "Merci à toi, c'est cool d'entendre que mes tuto te font progresser ;) Pour les CDN à mettre à jour il faut tester ce que tu utilises car quelques fois des fonctions sont dépréciées (surtout pour jQuery) donc ça peut casser certaines choses sur ton site. Bonne continuation !"

  • 5
    avis de davyledave laissé le 12/09/2018
    C'est super et passionnant ! Tout est limpide ! Bravo
    "Merci à toi pour ce commentaire et cette note :) J'essaye de transmettre mes connaissances le plus simplement possible, j'imagine que le pari est réussi ! A bientôt pour la suite sur WordPress alors ;)"

  • 5
    avis de membre-5208-8748 laissé le 28/05/2018
    Parfait! je suis vraiment impressionné par la qualité de cette vidéo : formation très complète, précise , des détails en veux-tu en voilà, très bonne élocution, bande son de la vidéo parfaite, qualité capture vidéo nickel. Respect. Très gros travail. A votre question pour l’intégration sur wordpress (je préfère joomla personnellement) avec une troisième partie , je dis OUI de suite ! pff pourquoi je n’ai pas eu des profs aussi « captivant » au lycée? !o! c’est peut-être le sujet qui me passionne alors? les deux sûrement … à bientôt !
    "Merci énormément pour ton commentaire ! Même si ça fait quelques années que je suis formateur sur tuto.com ça me fait toujours plaisir d'entendre ça, et ça motive beaucoup pour continuer à sortir de nouveaux tuto & formations. Et sinon, la 3ème partie est déja en ligne sur tuto.com :D Bonne continuation !!!"

  • 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.
accédez à plus de 1153 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données