$ 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é
  • 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é 107 tutoriels et obtenu une note moyenne de 4,7/5 sur 25 720 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de gege68 laissé le 12/11/2017
    Impressionné par la présentation de ce Tuto, j’en ai fait l’acquisition, ce que je ne regrette pas. Seule frustration, c’est de ne pouvoir mettre un plus à la suite des 5 étoiles que je lui attribue au vu de sa qualité. Ce Tuto est réalisé par un pro qui a su anticiper les difficultés de compréhension du débutant. C’est très bien structuré et rondement mené avec vidéo et son irréprochables. Les lignes de codes sont énoncées à haute voix en même temps qu’elles sont saisies et apparaissent à l’écran avec en plus une explication claire de l’utilisation des instructions mises en application, et ceci de la première à la dernière ligne. Nous n’avons en aucun moment le sentiment de rabâchage, et en fin de compte, c’est très efficace pour que cela s’imprègne bien dans notre mémoire. L’auteur ne fonce pas billes en tète pour nous expliquer ce qu’est Bootstrap, mais nous fait découvrir toute son utilité ainsi que celle de Jquery en cours de progression dans la conception de la page, et de fait cela devient beaucoup plus clair. Pour ce qui concerne la compatibilité avec Bootstrap 4, l’auteur donne les quelques lignes de code qu’il faudra modifier pour la migration, mais l’essentiel de ce Tuto était de faire comprendre comment utiliser Bootstrap et c’est réussi. La migration sera un excellent exercice complémentaire facile à faire pour ceux qui auront bien appliqué ce Tuto.
    "Bonjour à vous ! Eh bien, quel commentaire élogieux :) Cela me fait énormément plaisir, et c'est une récompense pour tout le temps passé à préparer, enregistrer et monter cette formation. Je vous remercie encore, et si vous avez l'occasion de me montrer votre site web créé à partir de la formation, n'hésitez pas à m'envoyer l'adresse. A bientôt pour de nouveaux tuto !"

  • 5
    avis de s3bln laissé le 08/11/2017
    Super tuto, très clair. Je suis également très intéressé par la 3eme partie sur Wordpress :)
    "Et merci pour votre note, ça fait plaisir :) La 3ème partie sur WordPress est bien prévue, et arrivera prochainement sur tuto.com. A très bientôt !"

  • 5
    avis de jeansebas laissé le 06/11/2017
    Bonjour merci pour le tuto super clair. La partie sur le menu responsive est pour moi le moment le plus compliqué et mérite d'aller un peu moins vite. Sinon je serai très intéressé par la 3 parties sur Wordpress. Merci
    "Merci à toi pour ton retour ! Et si tu as des questions sur le menu responsive n'hésite pas à me demander dans le salon d'entraide. À bientôt pour la partie 3 sur WordPress ;)"

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


non, je ne veux pas me former gratuitement