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
Créer un site OnePage Responsive - Partie 2 : L'INTÉGRATION

ajouter ce cours aux favoris retirer ce cours des favoris


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é 201 tutoriels et obtenu une note moyenne de 4,8/5 sur 61 406 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

16
avis laissés
5 étoiles
16
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de jackson51 laissé 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
    "Merci à toi, et la partie sur WordPress est dispo sur tuto.com ;)"

  • 5
    avis de eudaimonia laissé le 09/04/2020
    Clair, complet et efficace. Le formateur est tres pédagogue. Merci beaucoup !
    "Merci beaucoup ! Et maintenant, en avant pour la suite sur WordPress ;)"

  • 5
    avis de py-ro laissé 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
    "Un grand merci pour ton commentaire ultra positif ! A bientôt pour de nouveaux tuto ;)"

  • 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.
Parcours Developpeur Front End
accédez à plus de 1401 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données