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

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

Adrien Gazaix
12,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Tour d'horizon des fichiers de départ & intégration de Bootstrap 4
Leçon 2
Mise en place de la structure pour l'effet de Split Screen
Leçon 3
Styliser la partie MACARONS
Leçon 4
Styliser la partie CUPCAKES
Leçon 5
Styliser la partie GATEAU
Leçon 6
Ajouter un menu fixe pour scroller sur les différentes parties et avoir un historique de navigation
Leçon 7
Créer un callback à la fin d'un slide pour colorer le menu en bleu

Plan détaillé du cours

Leçon 1Tour d'horizon des fichiers de départ & intégration de Bootstrap 4
06m49s
Leçon 2Mise en place de la structure pour l'effet de Split Screen
15m15s
Leçon 3Styliser la partie MACARONS
07m19s
Leçon 4Styliser la partie CUPCAKES
06m18s
Leçon 5Styliser la partie GATEAU
05m25s
Leçon 6Ajouter un menu fixe pour scroller sur les différentes parties et avoir un historique de navigation
10m03s
Leçon 7Créer un callback à la fin d'un slide pour colorer le menu en bleu
06m31s
Leçon 8Boucle infinie sur les slides, changement de vitesse & type d'animation (easing)
07m53s
Leçon 9Rendre le site responsive tablette (ipad) format horizontal et vertical
08m13s
Leçon 10Créer une version responsive mobile - PARTIE 1
09m54s
Leçon 11Créer une version responsive mobile - PARTIE 2
28m09s

Aperçus

Avis des apprenants

Détail des avis
81
Apprenants
1
Commentaire
5/5
Note moyenne
5/5
1
4/5
0
3/5
0
2/5
0
1/5
0
Jean Levallois
Jean Levallois
Publié le 03/01/2018
Très bon tuto. Merci pour les explications claires et les astuces proposées.
Adrien Gazaix
Adrien Gazaix
Merci à vous pour ce retour très positif et à bientôt pour de nouveaux tuto !

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

Bootstrap 3, Bootstrap 4

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.

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données