Créer un mini-site Responsive mobile avec une navigation en split screen

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.