$ 26.00 au lieu de $ 39.00

Tuto Créer un site OnePage Responsive - Partie 2 : L'INTÉGRATION avec HTML, Bootstrap, jQuery en promo ! -33% jusqu'au 26 mai, 12:00

$ 26.00 au lieu de $ 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é 113 tutoriels et obtenu une note moyenne de 4,8/5 sur 45 284 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

9
avis laissés
5 étoiles
9
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-4722-4146 laissé le 21/03/2018
    Excellent tuto, clair, précis, même pour le débutant que je suis, le fait de nous ajouter un petit doc texte est super utile pour nous aider a retrouver les plug in. Bravo Adrien et merci pour votre disponibilité dans le salon ou par mail, je recommande ce tuto a tous ceux qui veulent un site moderne et responsive

  • 5
    avis de membre-5463-667 laissé le 22/02/2018
    Super tuto !! très complet pour une intégration moderne et avec une vraie panoplie de plugin jquery ou d'animation CSS. Explications simple et claire. Bravo !!
    "Merci beaucoup pour ce retour ! Et vous pouvez aller encore plus loin en le rendant dynamique avec WordPress :) La 3ème partie est dispo sur tuto.com ! A bientôt !"

  • 5
    avis de frankois laissé le 18/01/2018
    Encore un de vos tuto que je ne regrette vraiment pas d'avoir choisi !!!! Je n'ai pas trouvé de solution pour faire fonctionner proprement le parallax sur Safari... mais cela vient uniquement du navigateur. Vraiment, un grand merci pour la qualité de vos formations. Je trépigne en attendant le volet wordpress, vite s'il vous plaît ;)
    "Merci beaucoup pour ce retour très positif :) Pour le parallax sous safari, je ne peux pas tester comme je ne travaille pas sur MAC. Mais par contre j'ai fait un tuto sur le Parallax qui peut vous aider car on n'utilise pas de plugin. Et enfin pour la partie WordPress, oui en effet je suis un peu à la bourre mais je vais m'y mettre ! A très bientôt !"

  • 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 1104 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données