Dévoiler le footer de votre site avec le scroll
Dévoiler le footer de votre site avec le scroll
Voici une formation en ligne pour apprendre à utiliser CSS de A à Z.
Nous allons découvrir ensemble ce langage utilisé par les développeur web front-end.
L'apprentissage se fera en vidéo, étape par étape, avec des fichiers préparés spécialement pour que tu puisses coder en même temps que la vidéo et ainsi mieux intégrer les différentes leçons.
Le cours est également parsemé de projets pratiques pour utiliser directement ce qu'on vient d'apprendre.
Apprendre le CSS de A à Z : les différentes parties de cette formation complète :
- Les bases (Couleur, taille, marge, modèle de boîte),
- Théorie (Cascade, responsive, performances),
- Découverte des propriétés importantes,
- Animation et transition,
- Faire du responsive en CSS,
- Notions avancées,
- Flexbox,
- CSS Grid,
- Le préprocesseur SASS,
- Et on terminera avec en construisant un site de A à Z.
Beau programme n'est ce pas ?
Tous les codes sont fournis. Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
On se donne rendez-vous de l'autre côté pour ces 7h de cours.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Les bases du CSS
Les bases du CSS
Chapitre 3
Les règles du CSS
Les règles du CSS
Chapitre 4
Propriétés et concepts importants
Propriétés et concepts importants
Chapitre 5
Le Responsive Design
Le Responsive Design
Chapitre 6
Flexbox
Flexbox
Chapitre 7
CSS Grid
CSS Grid
Plan détaillé du cours
Chapitre 1 : Introduction
12m43
Leçon 1Introduction au cours
Leçon 2Mise en place et explication VS CODE
Chapitre 2 : Les bases du CSS
3h28
Leçon 1Téléchargement de la première section
Leçon 2Déclarer son CSS
Leçon 3La sélection partie 1
Leçon 4La sélection partie 2
Leçon 5Les couleurs
Leçon 6Spacing et bordures
Leçon 7Largeur et hauteur partie 1
Leçon 8Largeur et hauteur partie 2
Leçon 9Le modèle de boîte
Leçon 10La propriété Display
Leçon 11Les images, partie 1
Leçon 12Les images, partie 2
Leçon 13Styliser des vidéos
Leçon 14Gérer le texte
Leçon 15Utiliser Google Font
Leçon 16Tronquer un texte
Leçon 17Intro de l'exercice : Coder un bouton
Leçon 18Résolution de l'exercice : Coder un bouton
Leçon 19Intro de l'exercice : Coder une carte
Leçon 20Résolution de l'exercice : Coder une carte
Leçon 21Résolution de l'exercice : Coder une carte
Leçon 22Intro de l'exercice : Coder un article de blog
Leçon 23Résolution de l'exercice : Coder un article de blog
Chapitre 3 : Les règles du CSS
48m07
Leçon 1Les piliers du CSS
Leçon 2L'héritage
Leçon 3La cascade
Leçon 4La spécificité
Leçon 5Les docs officielles et la compatibilité
Leçon 6Les dispositions en CSS
Leçon 7Intro de l'exercice : Devine la couleur
Leçon 8Résolution de l'exercice : Devine la couleur
Chapitre 4 : Propriétés et concepts importants
2h15
Leçon 1Les pseudo-classes
Leçon 2Les sélecteurs
Leçon 3Les pseudo éléments
Leçon 4Les positions
Leçon 5Le contexte d'empilement
Leçon 6Les variables CSS
Leçon 7Les unités de mesure
Leçon 8Design system : Explication
Leçon 9Float et le bug des floats
Leçon 10Les "vendors prefixes"
Leçon 11Ombre et "outline"
Leçon 12Opacité et visibilité
Leçon 13Comprendre la propriété overflow
Leçon 14La fusion des marges
Leçon 15Intro de l'exercice : La sélection
Leçon 16Résolution de l'exercice : La sélection
Leçon 17Intro de l'exercice : Le millefeuille
Leçon 18Résolution de l'exercice : Millefeuille
Leçon 19Intro de l'exercice : La navbar
Leçon 20Résolution de l'exercice : La navbar
Leçon 21Intro de l'exercice : Le formulaire
Leçon 22Résolution de l'exercice : Le formulaire
Leçon 23Intro de l'exercice : Texte 3D
Leçon 24Résolution de l'exercice : Texte 3D
Leçon 25Intro de l'exercice : Texte autour d'une image
Leçon 26Résolution de l'exercice : Texte autour d'une image
Leçon 27Fun : Le pixel art et la découverte de codepen
Chapitre 5 : Le Responsive Design
40m21
Leçon 1Introduction au Responsive Design
Leçon 2Les "media queries"
Leçon 3Le texte reponsive
Leçon 4Quelques astuces "responsive"
Leçon 5Mobile-first vs Desktop-first
Leçon 6Introduction de l'exercie Responsive numéro 1
Leçon 7Résolution de l'exercie
Chapitre 6 : Flexbox
1h12
Leçon 1Introduction à Flexbox
Leçon 2Créer notre premier container
Leçon 3Les propriétés du container
Leçon 4Les propriétés des enfants
Leçon 5Intro de l'exercice : Flex Time !
Leçon 6Résolution de l'exercice : Flex Time !
Leçon 7Intro de l'exerice : Navbar responsive avec Flexbox
Leçon 8Résolution de la navbar responsive
Leçon 9Projet : Coder une galerie stylée
Chapitre 7 : CSS Grid
58m33
Leçon 1Introduction à CSS Grid
Leçon 2Notre première grille
Leçon 3Repeat et l'unité de mesure "fr"
Leçon 4Placer des items
Leçon 5Nommer des lignes et des aires
Leçon 6Rangées et colonnes implicites
Leçon 7Alignement grille et items
Leçon 8Min-content, max-content, et la fonction minmax()
Leçon 9Auto-fill() et auto-fit()
Leçon 10Intro de l'exercice : Listes responsive
Leçon 11Résolution de l'exercice : Listes responsive
Leçon 12Intro de l'exercice : Disposition type blog
Leçon 13Résolution de l'exercice : Disposition type blog
Chapitre 8 : Débugger son CSS
31m53
Leçon 1Bugs courants en CSS
Leçon 2Le panneau "Elements"
Leçon 3La technique de l'outline
Leçon 4Gérer le CSS non utilisé
Leçon 5L'outil "Toggle device toolbar"
Leçon 6Performance et animations
Chapitre 9 : Les animations en CSS
1h41
Leçon 1Introduction aux animations CSS
Leçon 2La propriété transform
Leçon 3Les transitions
Leçon 4Animer les couleurs de manière performante
Leçon 5Créer un effet "clic" en pur CSS
Leçon 6Les pseudo-elements et les transitions
Leçon 7Les animations
Leçon 8La perspective
Leçon 9Coder un cube 3D en CSS
Leçon 10Coder une carte tournante
Leçon 11Coder une animation de pulsation
Leçon 12Animation d'un loader
Leçon 13Coder un effet marquee
Leçon 14Animation de lien
Leçon 15Coder un effet "glitch"
Chapitre 10 : CSS Avancé
26m05
Leçon 1Les dégradés linéaires
Leçon 2La propriété filter
Leçon 3Utiliser clip-path
Leçon 4Le neomorphisme
Leçon 5Le glassomorphisme
Chapitre 11 : Projet final : Coder un site de A à Z
1h28
Leçon 1Présentation du projet final
Leçon 2Analyser et intégrer un "Design system"
Leçon 3Coder l'HTML du header
Leçon 4Coder le CSS de la "Hero section"
Leçon 5Coder l'HTML de la section "Activities"
Leçon 6Coder le CSS de la section "activities"
Leçon 7Coder la section parallax
Leçon 8Coder l'HTML de la section "Pricing"
Leçon 9Coder le CSS de la section "pricing"
Leçon 10Coder l'HTML de la section de contact et du footer
Leçon 11Coder le CSS de la partie Contact et du Footer et remerciements.
Chapitre 12 : [ANCIEN COURS] Introduction
15m10
Leçon 1Introduction
Leçon 2Qu'est ce que le CSS ?
Leçon 3Éditeur, code source
Leçon 4*Facultatif* Rappel de base HTML
Chapitre 13 : [ANCIEN COURS] Les bases
1h12
Leçon 1Déclarer son CSS
Leçon 2Les ID's et les classes
Leçon 3Les couleurs
Leçon 4La taille en CSS
Leçon 5La marge, le remplissage(padding), les bordures ...
Leçon 6Le modèle de boite
Leçon 7Les différents "Display"
Leçon 8Faire une image responsive
Leçon 9Défi : Faire une carte
Leçon 10Résolution
Leçon 11Le "Background"
Leçon 12Faire un Background étirable
Leçon 13Gérer le texte
Leçon 14Projet accueil responsive
Leçon 15Résolution
Chapitre 14 : [ANCIEN COURS] Théorie, comment le CSS fonctionne ?
24m05
Leçon 1Piliers CSS
Leçon 2La Cascade en CSS
Leçon 3La spécificité
Leçon 4Héritage
Chapitre 15 : [ANCIEN COURS] Plus en profondeur
1h13
Leçon 1La position
Leçon 2Les sélecteurs
Leçon 3Les sélecteurs partie 2
Leçon 4Les unités de mesures
Leçon 5Les pseudos classes
Leçon 6Les pseudos éléments
Leçon 7Float + le bug des floats
Leçon 8Propriétés en vrac
Leçon 9Projet : Img et texte
Chapitre 16 : [ANCIEN COURS] Animations et Transitions
39m44
Leçon 1La propriété "Transform"
Leçon 2Les transitions
Leçon 3Animation css.mp4
Leçon 4Projet Overlay
Leçon 5Projet animation de bouton
Chapitre 17 : [ANCIEN COURS] Le "responsive" en CSS
15m22
Leçon 1Qu'est ce que le responsive ?
Leçon 2Les médias queries
Leçon 3Le texte responsive
Chapitre 18 : [ANCIEN COURS] Apprendre Flexbox
23m04
Leçon 1Mise en place et propriétés de base
Leçon 2Centrer avec Flexbox, justy-content et align-items
Leçon 3Align-content et wrap
Leçon 4Ordre et flex-direction
Chapitre 19 : [ANCIEN COURS] Notions avancées
18m35
Leçon 1Les préfixes CSS "vendors"
Leçon 2Les tableaux
Leçon 3La fusion des marges
Chapitre 20 : [ANCIEN COURS] CSS Grid
40m22
Leçon 1Création de notre première grille
Leçon 2Repeat et Fractionnal Unit
Leçon 3Placement avec Grid-Row et Grid-Col
Leçon 4Placement sur plusieurs cellules
Leçon 5Nommer Colonnes et rangés
Leçon 6Nommer une "area"
Leçon 7Grille explicite et grille implicite
Leçon 8Aligner et centrer ces cellules
Leçon 9Aligner et centrer sa grille
Leçon 10Max-content et Min-content
Leçon 11Autofill, autofit et la fonction MinMax
Chapitre 21 : [ANCIEN COURS] Le préprocesseur SASS
36m03
Leçon 1Mise en place
Leçon 2Les variables et le nesting
Leçon 3Les Mixins
Leçon 4Fonction SASS
Leçon 5"Extend"
Leçon 6Les paramètres
Leçon 7Utiliser une boucle "for"
Leçon 8Error, warn et debug
Leçon 9Segmenter son code
Chapitre 22 : Projet final
1h05
Leçon 1Téléchargement
Leçon 2Mise en place
Leçon 3HTML de la navbar
Leçon 4Navbar SCSS
Leçon 5Accueil
Leçon 6Section texte et image HTML
Leçon 7Partie SCSS texte et image
Leçon 8Portfolio HTML
Leçon 9Portfolio SCSS
Leçon 10Section Parallax
Leçon 11Formulaire HTML
Leçon 12Style du formulaire et footer
Leçon 13Menu responsive
Avis des apprenants