Nouveau
Comment mettre en ligne facilement son site internet
Comment mettre en ligne facilement son site internet
Dans ce cours en ligne je vais vous montrer les piliers du développement web et Front-End.
Le développement Front-End c'est la programmation de la partie visuelle d'un site. On va s'occuper de ce qui est visible, mais aussi des animations, des interactions, des fonctionnalités, de la visualisations de données etc ...
C'est un domaine complet et passionnant, mais il faut un plan de route vu la taille de l'écosystème lié au Front aujourd'hui.
Ensemble nous allons voir les piliers du développement web, j'ai nommé HTML/CSS/JavaScript.
- HTML pour la structure.
- CSS pour le style.
- JavaScript pour les fonctionnalités, les interactions et le dynamisme.
Le cours est parsemé de projets et d'exercices, afin d’assimiler ce qu'on voit dans les parties théoriques.
Au programme de cette Formation complète développeur Front-End
Je ne peux pas faire une liste de tous les sujets que nous allons aborder, ce serait trop long, mais je vais en faire une qui résume les grands passages de ce cours :
- Apprentissage de l'HTML,
- Apprentissage du CSS,
- Le design responsive,
- L'accessibilité,
- Les animations,
- Création d'un site complet de A à Z,
- Apprendre à choisir des couleurs / une typographie,
- Flexbox, CSS Grid,
- Un préprocesseur CSS,
- Utiliser un Framework CSS,
- Utiliser un Framework JS,
- Apprendre JavaScript,
- Utiliser l'HTML Canvas,
- Apprendre à utiliser une librairie JS d'animation,
- etc ...
Je ne peux pas tout citer ici, mais on a du pain sur la planche, rendez-vous de l'autre côté pour commencer à coder !
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.
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Introduction
Introduction
Chapitre 2
Section HTML
Section HTML
Chapitre 3
Les bases du CSS
Les bases du CSS
Chapitre 4
Un peu de théorie CSS
Un peu de théorie CSS
Chapitre 5
Notions et concepts intermédiaires
Notions et concepts intermédiaires
Chapitre 6
Les transitions et les animations e
Les transitions et les animations e
Chapitre 7
Utiliser du JavaScript et du CSS ensemble
Utiliser du JavaScript et du CSS ensemble
Plan détaillé du cours
Chapitre 1 : Introduction
12m40
Leçon 1Introduction cours Front-end
Leçon 2Code source et explication
Chapitre 2 : Section HTML
1h23
Leçon 1Présentation HTML & CSS
Leçon 2Création du dossier et explication VS Code
Leçon 3Structure HTML de base
Leçon 4Découverte des balises de base
Leçon 5Les balises fermantes
Leçon 6Les éléments de type block vs inline
Leçon 7Bien présenter son HTML
Leçon 8Créer des liens
Leçon 9Les éléments "sémantiques"
Leçon 10Créer des listes en HTML
Leçon 11Gérer le texte en HTML
Leçon 12Les formulaires HTML
Leçon 13Textarea et Select
Leçon 14Entités HTML & Emojis
Leçon 15Utiliser des médias
Leçon 16Exercice HTML, utiliser les balises apprises
Leçon 17Résolution de l'exercice
Leçon 18Histoire et évolution du HTML & CSS
Chapitre 3 : Les bases du CSS
1h59
Leçon 1Introduction CSS
Leçon 2Mise en place du CSS
Leçon 3Les ID's et les classes
Leçon 4La couleur en CSS
Leçon 5Les dimensions en CSS
Leçon 6La marge, le remplissage et les bordures
Leçon 7Block et inline en CSS
Leçon 8Centrer avec margin-auto
Leçon 9Les différents Display
Leçon 10Opacity vs Visibility vs Display: none
Leçon 11Faire une image responsive en CSS
Leçon 12Exercice : faire une carte
Leçon 13Résolution exercice Carte
Leçon 14Les conventions de nommages
Leçon 15Gérer le style des liens
Leçon 16La propriété background en détail
Leçon 17La propriété "font" pour le texte
Leçon 18Les autres propriétés liées au texte
Leçon 19Les ombres en CSS
Leçon 20Créer des boutons en CSS
Chapitre 4 : Un peu de théorie CSS
24m44
Leçon 1Les piliers du CSS
Leçon 2La cascade
Leçon 3La spécificité
Leçon 4L'héritage
Leçon 5Comment les fichiers HTML & CSS chargent ?
Chapitre 5 : Notions et concepts intermédiaires
1h48
Leçon 1La position en CSS
Leçon 2Les unités de mesure
Leçon 3Les pseudos-classes
Leçon 4Border et border-radius
Leçon 5Outline vs Border + créer des pills
Leçon 6Exercice : Bouton 3D
Leçon 7Résolution Bouton 3D
Leçon 8Les pseudos éléments
Leçon 9Les "Floats" et le bug des "Floats"
Leçon 10La fusion des marges
Leçon 11EXERCICE : Créer une Navbar
Leçon 12Résolution exercice Navbar
Leçon 13La fonction Calc() en CSS
Leçon 14La propriété "overflow"
Chapitre 6 : Les transitions et les animations e
56m30
Leçon 1Comprendre "transform"
Leçon 2La perspective en CSS
Leçon 3Les transitions
Leçon 4Faire une chaîne de transitions
Leçon 5Les animations en CSS
Leçon 6Création : Faire un texte clignotant
Leçon 7Création : Loader en pur CSS
Leçon 8Création : Animation underline
Chapitre 7 : Utiliser du JavaScript et du CSS ensemble
31m03
Leçon 1Où placer son JavaScript ?
Leçon 2"Const" et les sélecteurs JavaScript
Leçon 3Les fonctions
Leçon 4Faire notre premier "class toggle"
Leçon 5Les événements JavaScript
Leçon 6Découvrons d'autres événements
Leçon 7Faire une animation d'icône hamburger
Chapitre 8 : CSS : Propriétés et notions avancées
1h01
Leçon 1Faire des dégradés en CSS
Leçon 2Les filtres CSS
Leçon 3Créer des tableaux en HTML / CSS
Leçon 4Faire une belle création avec "shape-outside"
Leçon 5Les "vendors" CSS
Leçon 6S'amuser avec "background-clip"
Leçon 7Les "sprites" en CSS
Leçon 8Découvrir "Clip-path"
Leçon 9Faire une page d'accueil avec dégradé + clip-path
Leçon 10Le contexte d'empilement
Chapitre 9 : L’accessibilité en CSS
1h06
Leçon 1Introduction à l’accessibilité
Leçon 2Les images
Leçon 3La sémantique
Leçon 4Les formulaires
Leçon 5La technique REM + 62.5%
Leçon 6Utiliser un lecteur d'écran
Leçon 7Comprendre "tabindex"
Leçon 8Utiliser les attributs ARIA
Leçon 9Faire un bon contraste
Leçon 10Faire un audit avec la console
Leçon 11Exercice accessibilité intro
Leçon 12Résolution
Chapitre 10 : Le "Responsive web design"
59m11
Leçon 1Introduction
Leçon 2La balise meta "viewport"
Leçon 3Exemples de sites réactifs (responsive)
Leçon 4Utiliser max-width / min-width
Leçon 5Comprendre les medias queries
Leçon 6Gérer le texte de manière "responsive"
Leçon 7Utiliser Rem et Em pour du texte réactif
Leçon 8Mobile-first / Desktop-first
Leçon 9Créer une navbar responsive à 100%
Chapitre 11 : Section Flexbox
59m19
Leçon 1Introduction Flexbox
Leçon 2Premier container et la propriété "justify-content"
Leçon 3La propriété "align-items"
Leçon 4Rangée ou colonne avec "flex-direction"
Leçon 5Passage à la ligne avec flex-wrap
Leçon 6Les trois propriétés liées aux items (shrink/grow/basis)
Leçon 7Gérer la position et l'alignement des items au cas par cas
Leçon 8Gérer l'alignement quand on passe à la ligne
Leçon 9Changer l'ordre des items
Leçon 10Exercice Flexbox intro
Leçon 11Résolution
Leçon 12Créer une galerie responsive avec Flexbox
Leçon 13Barre de navigation responsive avec Flexbox
Chapitre 12 : CSS Grid
43m31
Leçon 1Introduction CSS Grid
Leçon 2Création de notre première grille
Leçon 3Repeat et Fractionnal Unit
Leçon 4Placement avec Grid-Row et Grid-Col
Leçon 5Placement sur plusieurs cellules
Leçon 6Nommer Colonnes et rangés
Leçon 7Nommer une "area"
Leçon 8Grille explicite et grille implicite
Leçon 9Aligner et centrer ces cellules
Leçon 10Aligner et centrer sa grille
Leçon 11Max-content et Min-content
Leçon 12Autofill, autofit et la fonction MinMax
Chapitre 13 : Créer un site de A à Z
1h31
Leçon 1Introduction, mise en place de l'HTML
Leçon 2CSS De la navigation
Leçon 3CSS de l'Accueil
Leçon 4Section asymétrique
Leçon 5Responsive de la Section asymétrique partie 1
Leçon 6Responsive de la Section asymétrique partie 2
Leçon 7Section parallax
Leçon 8Section Tarifs HTML
Leçon 9Section Tarifs CSS
Leçon 10Section Contact HTML
Leçon 11Section Contact CSS
Chapitre 14 : Utiliser un préprocesseur CSS
36m46
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 15 : Utiliser un Framework CSS : Bulma
3h10
Leçon 1Introduction
Leçon 2Typographie partie 1
Leçon 3Typographie partie 2
Leçon 4Les couleurs
Leçon 5Aides
Leçon 6Display Responsive
Leçon 7Base et taille
Leçon 8Responsive
Leçon 9Écart
Leçon 10Alignement
Leçon 11Conteneur et Niveaux
Leçon 12Media et Hero
Leçon 13Section Footer
Leçon 14Fil
Leçon 15Inputs et Textarea
Leçon 16Select et Checkbox
Leçon 17Radio et fichier
Leçon 18Box et bouton
Leçon 19Contenu et icônes
Leçon 20Image, notif et tag
Leçon 21Progressbar et Tableau
Leçon 22Fil d'Ariane et Carte
Leçon 23Bouton déroulant et Menu
Leçon 24Message et modale
Leçon 25Navigation et pagination
Leçon 26Onglets
Leçon 27Personnaliser Partie 1
Leçon 28Personnaliser Partie 2
Leçon 29Projet 1 : Site immo, mise en place
Leçon 30Barre de navigation
Leçon 31Titre et input
Leçon 32Résultat et fin
Leçon 33Projet 2, Portfolio, mise en place
Leçon 34Barre de navigation
Leçon 35Page d'accueil
Leçon 36Section à propos
Leçon 37Réalisations
Leçon 38Formulaire
Leçon 39Fin bulma
Chapitre 16 : Section JavaScript, les bases
1h07
Leçon 1Introduction JavaScript
Leçon 2Où placer ses scripts ?
Leçon 3Comprendre Const et Let
Leçon 4Les différents types et le nommage de nos variables
Leçon 5Les opérateurs
Leçon 6Les chaînes de caractères
Leçon 7Créer une fonction en JavaScript
Leçon 8Les fonctions classiques
Leçon 9L'ordre de déclaration
Leçon 10Les conditions : If
Leçon 11"If else"
Leçon 12Comprendre les valeurs "truthy" et "falsy"
Leçon 13Utiliser un Switch
Leçon 14Créer une boucle en JS
Leçon 15Boucle "while" et "do while"
Chapitre 17 : Les tableaux
31m49
Leçon 1Comprendre et utiliser les tableaux
Leçon 2Les méthodes liées aux tableaux
Leçon 3Encore des méthodes liées aux tableaux
Leçon 4Les méthodes liées aux tableaux troisième partie
Leçon 5Utiliser des fonctions de rappels (callback) sur les tableaux.
Leçon 6Utiliser une boucle avec des tableaux
Chapitre 18 : Les chaînes de caractères
17m30
Leçon 1Les méthodes liées aux chaînes
Leçon 2Utiliser les "regex"
Leçon 3La méthode "replace"
Chapitre 19 : Les objets
35m46
Leçon 1Comprendre les objets
Leçon 2Valeurs primitives vs références
Leçon 3Delete et bracket/dot notation
Leçon 4Les tableaux sont des objets
Leçon 5Les tableaux sont des objets
Leçon 6Comprendre le mot clé "this"
Leçon 7Mot clé "this" seconde partie
Leçon 8La méthode bind()
Chapitre 20 : Le DOM (Document Object Model)
39m26
Leçon 1Comprendre le DOM
Leçon 2Sélectionner des éléments du DOM en JS
Leçon 3Sélectionner parent/enfant/même niveau
Leçon 4Styliser un élement du DOM
Leçon 5Créer et insérer un élément
Leçon 6Supprimer un élément
Leçon 7Les événements et gérer les propriétés d'un événement
Leçon 8Les événements les plus utilisés
Chapitre 21 : Faire de l’asynchrone en JS + manipuler une API
40m35
Leçon 1Utiliser setTimeout() & setInterval
Leçon 2Comprendre les promesses
Leçon 3Utiliser async await
Leçon 4Qu'est ce qu'une API ?
Leçon 5176-xhr-basic-call.mp4
Leçon 6Visualiser les données et pouvoir les utiliser
Leçon 7Créer une liste à partit des données
Leçon 8La méthode fetch()
Chapitre 22 : Qu'est ce que le JavaScript ES6 ?
24m49
Leçon 1Intro ES6
Leçon 2Let et const dans le détail
Leçon 3Les fonctions fléchées rappel
Leçon 4Les template literals
Leçon 5Spread operator
Leçon 6Rest operator
Leçon 7Paramètre par défaut
Leçon 8Export-Import
Chapitre 23 : Créer et comprendre des formulaires (HTML / CSS / JS)
2h36
Leçon 1Introduction formulaire
Leçon 2Les formulaires : Théorie
Leçon 3Les inputs de bases
Leçon 4Les labels
Leçon 5Textarea, select et datalist
Leçon 6Checkbox, radio et color
Leçon 7Les requêtes GET et POST
Leçon 8La validation
Leçon 9Projet 1 : Login
Leçon 10Projet 1 : CSS
Leçon 11Projet 2 : Accueil type Airbnb
Leçon 12Projet 2 : CSS
Leçon 13Projet 3 : Page d'accueil complète et form animé
Leçon 14CSS Partie 1
Leçon 15Animation CSS
Leçon 16Fin du CSS
Leçon 17Anim JS et CSS
Leçon 18Projet 4 : Formulaire de paiement
Leçon 19CSS Partie 1
Leçon 20CSS Partie 2
Leçon 21Partie JS
Leçon 22Projet 5 : Formulaire de contact
Leçon 23Fin section formulaire
Chapitre 24 : Les paradigmes de programmation en JavaScript
40m56
Leçon 1Introduction programmation fonctionelle
Leçon 2Les fonctions pures
Leçon 3Fonction d'ordre supérieur + immutabilité
Leçon 4Utiliser des fonctions comme expression
Leçon 5La programmation orienté objet : les objets
Leçon 6Utiliser des classes
Leçon 7Les constructeurs natifs en JavaScript
Leçon 8Créer des méthodes dans nos classes
Leçon 9Faire des chaînes de méthodes
Leçon 10Les sous-classes
Leçon 11Comprendre le prototype
Leçon 12Les fonctions constructeur
Chapitre 25 : Créez des animations javascript avec l'HTML Canvas
1h42
Leçon 1Mise en place
Leçon 2Notre premier Canvas
Leçon 3Les méthodes liés au Rectangle
Leçon 4Dessin de trajets
Leçon 5Création d'un dégradé
Leçon 6Dessin de lignes et d'un triangle
Leçon 7Les cercles
Leçon 8Ajouter du texte
Leçon 9Modifier la hauteur et largeur
Leçon 10Faire un Canvas responsive
Leçon 11Save et Restore
Leçon 12Translate
Leçon 13Rotate
Leçon 14Les images
Leçon 15Faire une animation avec "requestanimationframe"
Leçon 16Effet de souris
Leçon 17Projet système solaire
Leçon 18Fin Projet système solaire
Leçon 19Rosace : Mise en place
Leçon 20Fin projet Rosace
Leçon 21Détecter les collisions
Leçon 22Introduction Canvas
Leçon 23Fin détection de colission
Chapitre 26 : Utiliser la librairie d'animation Greensock.js
46m48
Leçon 1Introduction Greensock
Leçon 2Les méthodes "to","fromto",from"
Leçon 3Les "easings"
Leçon 4Appeler des fonctions de rappel avec GSAP
Leçon 5Animer plusieurs éléments + delay
Leçon 6Créer une timeline
Leçon 7Gérer le déclenchement des animations
Leçon 8Les méthodes et propriétés liées aux "Timelines"
Chapitre 27 : Gérer le Design d'un site
18m20
Leçon 1Choisir une bonne typographie
Leçon 2Créer des maquettes, prototypes et "wireframes".
Leçon 3Choisir des couleurs
Chapitre 28 : Introduction à React
1h27
Leçon 1Introduction
Leçon 2Mise en place d'un projet React
Leçon 3Explication des fichiers
Leçon 4Explication des composants
Leçon 5Gérer le CSS avec React
Leçon 6Gérer les événements avec React
Leçon 7Utiliser du "state" avec "useState()"
Leçon 8Comprendre les "props"
Leçon 9Remonter des données enfant-parent
Leçon 10Projet to-do liste
Leçon 11Créer un formulaire
Leçon 12Créer et afficher des cartes
Leçon 13Rajouter des cartes avec le formulaire
Leçon 14Fin to-do liste
Chapitre 29 : Aller plus loin
05m47
Leçon 1Et après ?
Avis des apprenants