Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Fais passer ton site web au stade supérieur avec BOOTSTRAP 4

Name: Fais passer ton site web au stade supérieur avec BOOTSTRAP 4
Rating: 4.4 (91 reviews)

Apprends à créer des sites web design et adapté aux mobiles en écrivant le moins de CSS possible.

Created byThomas Giraud

Last updated 11/2021

French

What you'll learn

Utiliser Bootstrap dans sa dernière version pour tous tes projets
Apprendre les dernières techniques en HTML et CSS
Créer des sites web magnifiques, responsive en un rien de temps et sans prise de tête
Intégrer tous les composants pré-construits sur Bootstrap
Utiliser la grille Bootstrap pour créer des positionnements complexes
Comprendre l'évolution de Bootstrap
Trouver toutes les ressources dont tu as besoin (même en dehors de Bootstrap)

Course content

3 sections • 14 lectures • 1h 54m total length

Introduction7:59
Dans cette vidéo :

Objectif de cette formation :
Utiliser Bootstrap dans sa dernière version pour tous tes projets ;
Apprendre les dernières techniques en HTML et CSS ;
Créer des sites web magnifiques, responsive en un rien de temps et sans prise de tête ;
Intégrer tous les composants pré-construits sur Bootstrap ;
Utiliser la grille Bootstrap pour créer des positionnements complexes ;
Comprendre l'évolution de Bootstrap ;
Trouver toutes les ressources dont tu as besoin (même en dehors de Bootstrap) ;
Utiliser des templates et des thèmes pour produire 20 fois plus, 20 fois plus vite

Comment communiquer ?
Sur slack en cliquant sur le lien dans les ressources de cette vidéo ;

Slack est un outil composé de channels publiques et privés sur lequel nous pourrons tous échanger. Slack est l'outil phare des startups et jeunes entreprises car il permet une énorme flexibilité.
Tu peux l'ouvrir directement depuis ton navigateur ou bien télécharger l'application Slack.

Plan du cours :

Module 1 : Introduction

Dans ce module nous allons découvrir comment fonctionne Bootstrap de A à Z.
Nous commencerons par le commencement à savoir :
Comment Bootstrap est né, son évolution et comment il est devenu un des plus gros projet du Web OpenSource.

Nous verrons ensuite comment l'intégrer sur son site web puis comment il fonctionne concrètement grâce à son système de Grille pour gérer le Responsive de son site web.

Ensuite, nous aborderons tous les principes et descendront un par un tous les composants pré-faits de Bootstrap.

Module 2 : Maîtriser les CLASS Bootstrap

Nous pourrions nous contenter d'intégrer Bootstrap sur notre site web et d'utiliser les composants pré-faits sans comprendre vraiment tout ce qu'il se cache derrière.

Dans ce module nous allons voir comment gérer toutes les fonctions basiques de CSS le tout SANS ÉCRIRE DE CSS.

Nous verrons donc comment gérer les marges, padding, hauteur, largeur, couleurs, etc... Pour vraiment manier Bootstrap à 100% !

Module 3 : Création d'un site web depuis 0 avec Boostrap

Dans ce module nous allons construire un site web depuis une page entièrement Blanche grâce à Bootstrap en écrivant le moins de CSS possible.

Le code du site web sera fourni dans le module.

Module 4 : Allez plus loin

Dans ce module nous allons, comme son nom l'indique, aller plus loin !

Nous verrons les composants plus poussés de Bootstrap puis découvrirons tous les thèmes et templates que Bootstrap ou d'autres sites web mettent à disposition pour faciliter encore plus notre développement.

Nous verrons aussi 2 sites web qui proposent des snippets (morceaux de codes) prêts à être intégrés et réalisés par toute la communauté de web designers à travers le monde avant de voir les autres Frameworks CSS que l'on peut trouver.

Prêt ??

GO !

Qu'est-ce que Bootstrap et à quoi ça sert ?13:04
Dans cette vidéo :

Nous allons découvrir qu'est-ce que Bootstrap et à quoi ça sert !

Bootstrap est un Framework CSS et non une librairie.

Une librairie c'est quelque chose que l'on intègre dans notre code et qui nous permet d'élargir nos possibilités comme FontAwesome nous permet d'insérer des icones et AnimationOnScroll (AOS) nous permet d'ajouter des animations.

Un framework (CSS ou autre ex: JavaScript) est un gros bloc de code autour duquel nous allons construire notre site web. Toute la structure de notre site web dépend du Framework, dans ce cas présent : Bootstrap.

Un peu d'histoire ?

Bootstrap a été créé en 2011 par l'équipe de développeurs de Twitter afin que tous les développeurs s'occupant de la partie visuelle du site travaille de la même façon, puissent se comprendre et aller plus vite.

Cet outil était destiné à rester en interne puis Twitter a fait le choix de le rendre public.

Peu de temps après, Bootstrap est devenu un des projet les plus populaires du web avec des milliers de collaborateurs !

À quoi sert Bootstrap ?

Bootstrap dispose d'un immense fichier CSS déjà rédigé !

Ce qui veut dire que... Il suffit d'insérer la bonne CLASS dans notre code HTML et BOUM ! Notre contenu est déjà mis en forme.

Cela permet de gagner un temps fou... et en plus de cela, avoir un site web propre et bien mis en forme.

D'autre part, Bootstrap permet de gérer le responsive de notre site avec un système de Grille qu'ils ont mis en place et que nous allons découvrir dans la suite des vidéos.

C'est magique ! Et indispensable lorsqu'on développe des interfaces visuelles.
Comment installer Bootstrap5:08
Dans cette vidéo :

En vérité, Bootstrap ne s'installe pas !

Boostrap s'intègre.

Tu as deux choix,

Soit tu utilise les liens CDN (des fichiers hébergés sur le cloud que tu as juste à copier/coller)

Soit tu copies le contenu des fichiers Bootstrap puis tu intègre les fichiers directement dans ton code.

Dans cette vidéo, nous allons choisir d'intégrer Bootstrap grâce aux liens CDN ci-dessous.

La partie CSS à intégrer entre les balises <head> de ton site web :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

La partie JS à intégrer après la balise </body> de ton site web :
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Comment fonctionne le système de grille pour gérer le responsive9:30
C'est parti pour le Système de Grille sur Bootstrap !

Le système de grille permet de gérer le Responsive (le fait d'avoir un site adaptable à tous les supports - mobile / tablette / ordinateur)

Les grilles Bootstrap sont encore plus efficace que les FlexBox d'une part car elles utilisent les FlexBox et d'autre part car on peut adapter notre positionnement en fonction des tailles d'écrans.

Contrairement à Flexbox qui opte pour un positionnement intelligent qui pose les éléments à la ligne dès qu'ils se touchent.

Sur Boostrap, notre site va être divisé en 12 colonnes que l'on soit sur un tout petit écran ou sur un grand écran.

- Si on veut qu'un élément prenne la moitié du site web alors il faudra donner une taille de 6 colonnes à notre élément.
- Si on veut qu'un élément prenne l'intégralité du site web alors il faudra donner une taille de 12 colonnes à notre élément.
Bootstrap dispose de Media-Queries pré-faites :
- Large : 1220px et plus ;
- Défaut : 980px et plus ;
- Tablettes : 768px et plus ;
- Smartphones/Tablettes : 768px et moins ;
- Smartphones : 480px et moins.

Grâce à ce système, on pourra dire à un élément de prendre un tiers de la page sur Ordinateur, la moitié sur tablette et l'intégralité sur mobile !

Pas mal non ?
Quels sont les composants de Bootstrap - Commence à Gagner du temps !13:41
Dans cette vidéo :

Dans cette vidéo, nous allons découvrir tous les composants pré-faits de Bootstrap.

Pour ce faire, nous allons nous diriger vers la documentation Bootstrap sur le lien suivant : https://getbootstrap.com/docs/4.5/components/alerts/

Pour l'utiliser ? Rien de plus simple !

Après avoir intégré Bootstrap dans ton code, il te suffira de sélectionner le code disponible sous le composant que tu souhaites intégrer et Magie : Ça fonctionne.

Nous allons descendre la plupart des composants pour te donner une vue d'ensemble de tout ce qui est disponible sur la Documentation de Bootstrap :)

Bon visionnage !
Comprendre le principe de colonnes lié à Bootstrap10:51
Dans cette vidéo :

Nous avons vu dans les vidéos précédentes comment fonctionnait le système de Grille de Bootstrap.

Nous avions vu les media queries faites par défaut sur Boostrap et maintenant nous allons les mettre en pratique !

Pour créer une colonne, tu as juste à créer une class="col" à ta div.

- Si on veut qu'un élément prenne la moitié du site web alors il faudra donner une taille de 6 colonnes à notre élément.
Exemple :

<div class="col-6"></div>

- Si on veut qu'un élément prenne l'intégralité du site web alors il faudra donner une taille de 12 colonnes à notre élément.
Exemple :

<div class="col-12"></div>

Bootstrap dispose de Media-Queries pré-faites :
- Large : 1220px et plus ;
- Défaut : 980px et plus ;
- Tablettes : 768px et plus ;
- Smartphones/Tablettes : 768px et moins ;
- Smartphones : 480px et moins.

Grâce à ce système, on pourra dire à un élément de prendre un tiers de la page sur Ordinateur, la moitié sur tablette et l'intégralité sur mobile !
Exemple :

<div class="col-lg-4 col-md-6 col-sm-12"></div>

4 car 12/3 = 4 :)

Bon visionnage ! N'hésite pas à bien pratiquer/tester de ton côté à chaque fois.
Quelle est la structure de base d'un fichier avec Bootstrap8:56
Dans cette vidéo :

C'est parti pour découvrir la structure de base d'un fichier avec Bootstrap.

Ce sont des choses que nous avons déjà mis en pratique dans les vidéos précédents mais nous allons le voir plus en détail dans cette vidéo.

Pour créer une section grâce à Bootstrap nous allons avoir besoin de plusieurs éléments :

Un container, qui aura pour but de contenir tous les éléments de notre section. Le container peut être fluid - Dans ce cas il prendra toute la taille de l'écran - ou normal - Dans ce cas il créera des goutières sur les écrans plus larges.

Une Row, pour créer une nouvelle ligne dans notre container. Un container peut être composé de plusieurs rows.

Une colonne, pour indiquer le nombre de colonnes à insérer dans une row. Une row peut contenir plusieurs colonnes.

Enfin, à l'intérieur des colonnes nous placeront nos éléments HTML. Tous les éléments du dessus ne sont que des blocks qui permettent de contrôler tous les éléments de notre site web.

Ce que j'aime bien faire, c'est entourer le container d'une balise <section> afin de marquer le début d'une nouvelle section qui sera par défaut en taille entière d'écran (pratique pour ajouter un fond à la section).

Résultat :
<section class="nomsection">
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>

Enjoy !
Comment utiliser le Jquery pour faire fonctionner certains composants10:07
Dans cette vidéo :

Le Jquery permet de faire fonctionner des composants plus poussés sur Bootstrap.

Qu'est ce que le Jquery ?

Wikipedia nous dit :
jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l'écriture de scripts côté client dans le code HTML des pages web.

En gros, le Jquery permet de récupérer des événements qui se passent sur ton site web (clic, chargement, scroll, etc...)
Et d'effectuer des actions en fonction de cet événement !

C'est hyper puissant et cela permet de donner encore plus de vie à notre site web ?

Boostrap utilise Jquery pour certains composants et c'est ce que nous allons découvrir dans cette vidéo !

Comment utiliser les FlexBox sans même écrire de CSS9:34
Dans cette vidéo :

Comme nous l'avons vu dans les premières vidéos, dans sa version 4, Boostrap utilise Flexbox. C'est assez facile à intégrer, il faut juste connaître les flexbox pour comprendre le comportement ainsi que la class Boostrap.

Ajouter le display flex :
<div class=”container d-flex”>

<div class=”row d-flex”>

<div class=”col d-flex”>

Flex-Direction :
<div class=”d-flex flex-row”>
<div class=”d-flex flex-row-reverse”>

Justify-content :
<div class=”container d-flex justify-content-center”>
<div class=”container d-flex justify-content-start”>
<div class=”container d-flex justify-content-end”>
<div class=”container d-flex justify-content-between”>
<div class=”container d-flex justify-content-around”>

Align-items :
<div class=”container d-flex align-items-center”>
<div class=”container d-flex align-items-start”>
<div class=”container d-flex align-items-end”>
<div class=”container d-flex align-items-baseline”>
<div class=”container d-flex align-items-stretch”>

Align-content :
<div class=”container d-flex align-content-center”>
<div class=”container d-flex align-content-start”>
<div class=”container d-flex align-content-end”>
<div class=”container d-flex align-content-stretch”>
<div class=”container d-flex align-content-around”>

Flex-wrap :
<div class=”container d-flex flex-wrap”>

<div class=”container d-flex flex-wrap-reverse”>

<div class=”container d-flex flex-nowrap”>

Flex-fill :
<div class=”container d-flex”>
<div class=”flex-fill”>
</div>
<div class=”flex-fill”>
</div>
</div>

Flex-grow :
<div class=”container d-flex”>
<div class=””>
</div>
<div class=””>
</div>
<div class=”flex-grow-1”>
</div>
</div>

Flex-shrink :
<div class=”container d-flex”>
<div class=”flex-shrink-1”>
</div>
</div>

Order :
<div class=”container d-flex”>
<div class=”order-2”>
</div>
<div class=”order-3”>
</div>
<div class=”order-1”>
</div>
</div>

Align-self :
<div class=”container d-flex”>
<div class=”align-self-start”>
</div>
<div class=”align-self-end”>
</div>
<div class=”align-self-end”>
</div>
<div class=”align-self-baseline”>
</div>
<div class=”align-self-stretch”>
</div>
</div>

Enjoy !
Comment appliquer les couleurs aux textes / fonds avec Bootstrap6:02
Dans cette vidéo :

Intégrer des couleurs de base n'aura jamais été aussi simple...

Couleurs du contenu :
<p class=””>Couleur basique</p>
<p class=”text-muted”>Ce texte sera gris clair</p>
<p class=”text-primary”>Ce texte sera bleu important</p>
<p class=”text-success”>Ce texte sera vert validé</p>
<p class=”text-info”>Ce texte sera turquoise bleu informatif</p>
<p class=”text-warning”>Ce texte sera jaune attention</p>
<p class=”text-danger”>Ce texte sera rouge danger</p>
<p class=”text-secondary”>Ce texte sera gris contenu</p>
<p class=”text-dark”>Ce texte sera gris foncé</p>
<p class=”text-body”>Ce texte prendra la couleur de body, souvent noir</p>
<p class=”text-light”>Ce texte sera gris très clair</p>
<p class=”text-white”>Ce texte sera blanc</p>

Couleurs de fond :
<p class=”bg-primary”>Ce texte sera bleu important</p>
<p class=”bg-success”>Ce texte sera vert validé</p>
<p class=”bg-info”>Ce texte sera turquoise bleu informatif</p>
<p class=”bg-warning”>Ce texte sera jaune attention</p>
<p class=”bg-danger”>Ce texte sera rouge danger</p>
<p class=”bg-secondary”>Ce texte sera gris contenu</p>
<p class=”bg-dark”>Ce texte sera gris foncé</p>
<p class=”bg-light”>Ce texte sera gris très clair</p>

Enjoy !
Comment utiliser margin et padding via Boostrap7:07
Dans cette vidéo :

On a toujours des petits paddings/margins à intégrer sur nos éléments. Grâce à Bootstrap on peut le faire simplement directement dans la class de notre élément avec des tailles pré-définies sur Boostrap.

Introduction aux CLASS :
m = margin
p = padding

t = margin-top | padding-top
b = margin-bottom | padding-bottom
l = margin-left | padding-left
r = margin-right | padding-right
x = “” left et right
y = “” top et bottom

Sans extension = left, right, top, bottom

Marges - Padding :
Introduction aux tailles :

$spacer = 1rem = 16px

0 = 0
1 = $spacer * .25
2 = $spacer * .5
3 = $spacer
4 = $spacer * 1.5
5 = $spacer * 3
auto

n = Négatif | Exemple : n4 = -24px si $spacer = 16px

Exemples :
<div class=”mt-5”></div>

<div class=”mb-3”></div>

<div class=”mx-1”></div>

<div class=”mx-auto”></div>

<div class=”mt-n3”></div>

<div class=”pl-2”></div>

<div class=”px-3”></div>

Enjoy !
Quelle CLASS utiliser pour définir la hauteur et la largeur3:24
Dans cette vidéo :

Sur Bootstrap, on peut gérer facilement les Hauteurs et Largeur en %.

Introduction aux CLASS :
Les classes :

w = width
h = height
mw = width
mh = height

Les tailles :

25 = 25%
50 = 50%
75 = 75%
100 = 100%

Width - Height / Exemples :
<div class=”w-25”></div>

<div class=”mw-100”></div>

<div class=”h-50”></div>

<div class=”mh-25”></div>

<div class=”mh-75”></div>

Enjoy !
Comment gérer les styles de texte8:27
Dans cette vidéo :

Mettre le texte en gras ici, en italique la bas.

Changer la taille de polices, ajouter des décorations, BREF !

À chaque fois qu'on édite du contenu en HTML on édite pas mal de CSS pour le mettre en forme.

Dans cette vidéo on va découvrir toutes les CLASS bootstrap propres aux textes.

Les styles propres aux balises :
<div class=”h1”></div>

<div class=”h2”></div>

<div class=”h...”></div>

<ul class=”list-unstyled”></ul> //Pour enlever les points sur les listes

Alignement :
<div class=”text-justify”></div>

<div class=”text-left”></div>

<div class=”text-center”></div>

<div class=”text-right”></div>

Responsive :
<div class=”text-sm-”></div>

<div class=”text-md-”></div>

<div class=”text-lg-”></div>

<div class=”text-xl-”></div>

Transformations :
<div class=”text-lowercase”></div>

<div class=”text-uppercase”></div>

<div class=”text-capitalize”></div>

Épaisseur de texte :
<div class=”font-weight-bold”></div>

<div class=”font-weight-normal”></div>

<div class=”font-weight-light”></div>

<div class=”font-italic”></div>

Enjoy !
Allez plus loin !0:35

Requirements

Savoir utiliser un éditeur de texte
Avoir des bases en HTML et CSS
Une tasse de café

Description

Tu en as marre de passer des heures à mettre en forme ton site web ?

Je vais te parler d'une expérience vécue...

Lorsque j'ai commencé à créer mes premiers sites web : On m'a dit d'apprendre le HTML et le CSS.

Et en effet, c'est indispensable !

Une fois le HTML/CSS appris je me suis dit : "ENFIN je sais développer des sites web ?"

Quelques temps plus tard, j'obtiens ma toute première mission (rémunérée).

Ce fut littéralement la pire expérience de ma vie.

J'avais 17 ans,

J'ai créé le site le plus horrible de ma vie et en plus de cela, j'ai mis plus de deux semaines à le créer.

Ce projet m'a rapporté 300 euros. Je me sentais tellement mal que je ne les ai pas dépensé avant 6 mois.

Pendant ces 6 mois je me suis demandé :

Comment faire mieux ?
Comment créer un site 10 fois plus beau ?

Mais surtout...

Comment créer un site 10 fois plus rapidement ?

Il y avait une solution, c'était OBLIGATOIRE. Mais laquelle ?

Comment les agences Web faisaient pour avoir 10-15 même 20 clients en un seul mois ?

Je veux te présenter la découverte qui a changé ma vie d'expert en Développement Web

En effet, il y avait une solution.

Un secret ? Je ne sais pas...

Mais PERSONNE ne m'en avait parlé.

J'ai donc du le découvrir par moi même, je ne savais pas trop où chercher ni quoi chercher.

J'ai donc retourné Youtube jusqu'au moment où l'information est venue à moi via des recommandations...

Et quand je l'ai découvert tout est devenu évident !

Il existe un moyen de créer un site web design SANS ÉCRIRE DE CSS en MOINS D'UNE HEURE

Nous sommes des créateurs oui mais notre job c'est avant tout de personnaliser des plateformes aux attentes de notre client (ou aux nôtres).

Donc tout ce qui peut nous permettre de créer toute la base rapidement est... BIENVENUE !

Pour ce faire, nous utilisons une solution appelée BOOTSTRAP.

Bootstrap est un framework CSS, autrement dit :

Utiliser Bootstrap c'est utiliser un immenser fichier CSS DÉJÀ RÉDIGÉ.

Toutes les CLASS sont pré-faites : On a juste à les appeler au bon moment, au bon endroit.

...Et si le CSS est déjà fait, tu peux créer un site web Design en utilisant un seul et unique langage : LE HTML !

Alors oui,

C'est important de connaître le CSS pour personnaliser mais toute ta base sera déjà en place grâce à Bootstrap.

Tu te souviens de mon premier site web, on en a parlé plus haut ?

6 mois plus tard, je l'avais recréé avec Boostrap sans rien lui demander :

Il a été tellement content qu'il m'a donné 300 euros de plus.

Depuis je n'ai jamais arrêté d'utiliser Bootstrap, j'ai testé d'autres solutions mais je suis toujours revenu sur la meilleure : Celle ci !

Who this course is for:

Toute personne ayant envie d'apprendre et se former aux dernières pratiques en Web Design
Si tu connais déjà Bootstrap 3 et que du veux découvrir la version 4
Toute personne souhaitant créer des sites web : Beaux - Responsive - Rapidement.

Fais passer ton site web au stade supérieur avec BOOTSTRAP 4

What you'll learn

Explore related topics

Course content

Bienvenue dans ce cours !1 lecture • 8min

INTRODUCTION À BOOTSTRAP7 lectures • 1hr 11min

MAÎTRISER LES CLASS BOOTSTRAP6 lectures • 35min

Requirements

Description

Who this course is for: