$ 12.00

Tuto Créer un mini-site Responsive mobile avec une navigation en split screen avec Bootstrap, jQuery, CSS

$ 12.00

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

Dans ce tuto Bootstrap et jQuery en vidéo, nous allons apprendre ensemble comment créer un mini-site avec une navigation animée en split screen.

Le mini-site sera Responsive. Il s'adaptera pour les formats tablette tels que l'iPad par exemple et nous créerons aussi une version mobile avec une présentation un peu différente et une réorganisation du contenu pour une meilleure lisibilité.

Cet atelier pratique est un excellent moyen de parfaire vos connaissances en intégration web !

Au programme de ce tuto site responsive et split screen

Voici les notions qui seronts abordées dans cette formation :

  • Un tour d'horizon des fichiers de départ,
  • Intégration de Bootstrap 4,
  • Créer la structure HTML/CSS/jQuery pour accueillir notre système de split screen,
  • Mettre en place des titres, paragraphes et boutons,
  • Colorer le fond d'une seule partie,
  • Mettre en place un background adaptatif,
  • Réunir 2 images pour en faire une seule grande,
  • Utiliser une classe de Bootstrap pour rendre une balise img responsive,
  • Ajouter un menu en position fixed,
  • Rendre les liens cliquables pour scroller sur les différentes parties,
  • Mettre en place un historique de navigation,
  • Faire une boucle infinie sur les slides,
  • Changer la vitesse,
  • Modifier l'effet d'animation (easing),
  • Utiliser les media queries pour rendre le site responsive tablette et mobile,
  • Ajouter un ID à un élément du DOM en jQuery,
  • Récupérer le HREF d'un lien en jQuery,
  • Animer le scroll de la page lors d'un click sur lien du menu mobile,
  • Modifier l'ordre des blocs en jQuery,
  • Refermer le menu mobile grâce aux fonctions prévues par Bootstrap.

N'hésitez pas à regarder l'extrait vidéo pour vous faire une idée plus précise sur le résultat final de ce tuto.
Pour suivre au mieux la vidéo, il est conseillé d'avoir les bases du HTML/CSS/JQUERY et savoir comment fonctionne Bootstrap.

Vous trouverez dans les sources les fichiers de départ, le mini-site final ainsi que la liste des sites visités au cours de la formation.

Je reste bien évidemment disponible dans la salon d'entraide si vous avez des questions pendant ou après le visionnage de la vidéo.

Table des matières de cette formation Bootstrap, jQuery, CSS (durée : 1h51m)

    • Tour d'horizon des fichiers de départ & intégration de Bootstrap 4 00:06:49
    • Mise en place de la structure pour l'effet de Split Screen 00:15:15
    • Styliser la partie MACARONS 00:07:19
    • Styliser la partie CUPCAKES 00:06:18
    • Styliser la partie GATEAU 00:05:25
    • Ajouter un menu fixe pour scroller sur les différentes parties et avoir un historique de navigation 00:10:03
    • Créer un callback à la fin d'un slide pour colorer le menu en bleu 00:06:31
    • Boucle infinie sur les slides, changement de vitesse & type d'animation (easing) 00:07:53
    • Rendre le site responsive tablette (ipad) format horizontal et vertical 00:08:13
    • Créer une version responsive mobile - PARTIE 1 00:09:54
    • Créer une version responsive mobile - PARTIE 2 00:28:09



Formateur : Adrien Gazaix

Adrien Gazaix a publié 111 tutoriels et obtenu une note moyenne de 4,7/5 sur 26 203 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    Bootstrap 3, Bootstrap 4, jQuery , CSS 2, CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    intermédiaire
  • Que contient le fichier source ?
    Les fichiers de départ, le mini-site final ainsi que la liste des sites web visités au cours de la formation.
accédez à plus de 1616 tuto gratuits


non, je ne veux pas me former gratuitement