Objectif Frontend : Comment créer facilement une Sidebar ?
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Objectif Frontend : Comment créer facilement une Sidebar ?

Carl Brison
9,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans ce cours en ligne, je vous propose d'apprendre comment créer une sidebar sans langage de programmation, et uniquement du langage CSS !

Cette sidebar nous permettra de gagner de la place sur la largeur de l'écran, en affichant par défaut que des pictogrammes.
C'est en passant le pointeur de la souris sur la sidebar que nous verrons alors apparaître les liens de notre menu de navigation.
Ce type de menu en sidebar est beaucoup utilisé dans les interfaces d'administration. De plus, cela permet de donner un effet moderne et agréable en terme ergonomique. Vous pourrez ainsi proposer ce type de navigation moderne à vos clients ou bien l'appliquer à vos propres développements.

Un QCM vous sera proposé en fin de formation et vous permettra de valider les connaissances théoriques acquises pendant la formation.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.

Je fournis les codes de ce tuto CSS avec le tuto.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du code HTML
Leçon 2
Mise en forme de la Sidebar avec le CSS
Leçon 3
Fonctionnement de la Sidebar
Leçon 4
Ajouter une zone article à côté de la Sidebar

Plan détaillé du cours

Leçon 1Mise en place du code HTML
09m03s
Leçon 2Mise en forme de la Sidebar avec le CSS
11m25s
Leçon 3Fonctionnement de la Sidebar
05m47s
Leçon 4Ajouter une zone article à côté de la Sidebar
06m05s

Aperçus

Avis des apprenants

Détail des avis
22
Apprenants
7
Commentaires
4,9/5
Note moyenne
5/5
6
4/5
1
3/5
0
2/5
0
1/5
0
Joel Valentin
Joel Valentin
Publié le 31/01/2023
Excellent tuto, une très bonne application du HTML et CSS. Toujours ravi de suivre tes tutos Carl. Toujours claire et précis dans tes explications. Bonne continuation et à un prochain tuto!
Carl Brison
Carl Brison
Merci beaucoup pour ton commentaire super gentil ;-)
Valérie Arno
Valérie Arno
Publié le 05/06/2022
Très bien ce tuto. Mon point faible : le overflow:hidden et le z-index. Je n'y pense jamais et surtout comment ou quand les utiliser. Deux propriétés pourtant formidables :-) Cela fait une page avec une belle sidebar complètement responsive sans utiliser les media queries. Merci et à bientôt Carl ;-)
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil, Valérie ;-)
Olivier Ousmail
Olivier Ousmail
Publié le 08/03/2022
Simple, clair et efficace. Merci
Carl Brison
Carl Brison
Merci beaucoup ;-)

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

HTML 5, CSS 3

Que contient le fichier source ?

Le code complet de ce tutoriel

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données