79,00

Tuto Formation complète développeur Front-End avec HTML, CSS, JavaScript

79,00

  • Une formation vidéo de 28h41m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

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.
 

Table des matières de cette formation HTML, CSS, JavaScript (durée : 28h41m)

  • Introduction
    • Introduction cours Front-end 00:06:54
    • Code source et explication 00:05:46
  • Section HTML
    • Présentation HTML & CSS gratuit 00:05:10
    • Création du dossier et explication VS Code 00:03:40
    • Structure HTML de base gratuit 00:03:40
    • Découverte des balises de base 00:06:11
    • Les balises fermantes 00:03:20
    • Les éléments de type block vs inline 00:04:57
    • Bien présenter son HTML 00:05:19
    • Créer des liens 00:02:39
    • Les éléments "sémantiques" 00:03:56
    • Créer des listes en HTML 00:03:36
    • Gérer le texte en HTML 00:06:18
    • Les formulaires HTML gratuit 00:05:51
    • Textarea et Select 00:05:08
    • Entités HTML & Emojis 00:04:56
    • Utiliser des médias 00:06:37
    • Exercice HTML, utiliser les balises apprises 00:01:53
    • Résolution de l'exercice 00:05:46
    • Histoire et évolution du HTML & CSS 00:04:06
  • Les bases du CSS
    • Introduction CSS gratuit 00:03:11
    • Mise en place du CSS gratuit 00:06:18
    • Les ID's et les classes 00:04:58
    • La couleur en CSS 00:07:13
    • Les dimensions en CSS 00:07:17
    • La marge, le remplissage et les bordures 00:06:46
    • Block et inline en CSS 00:06:07
    • Centrer avec margin-auto 00:02:32
    • Les différents Display 00:07:02
    • Opacity vs Visibility vs Display: none 00:03:54
    • Faire une image responsive en CSS 00:07:17
    • Exercice : faire une carte 00:01:20
    • Résolution exercice Carte 00:07:54
    • Les conventions de nommages 00:04:47
    • Gérer le style des liens 00:01:05
    • La propriété background en détail 00:12:14
    • La propriété "font" pour le texte 00:09:42
    • Les autres propriétés liées au texte 00:05:28
    • Les ombres en CSS 00:06:00
    • Créer des boutons en CSS 00:08:21
  • Un peu de théorie CSS
    • Les piliers du CSS gratuit 00:09:36
    • La cascade 00:03:16
    • La spécificité 00:05:45
    • L'héritage 00:04:01
    • Comment les fichiers HTML & CSS chargent ? 00:02:06
  • Notions et concepts intermédiaires
    • La position en CSS 00:14:50
    • Les unités de mesure 00:11:54
    • Les pseudos-classes 00:10:42
    • Border et border-radius 00:15:37
    • Outline vs Border + créer des pills 00:04:51
    • Exercice : Bouton 3D 00:01:40
    • Résolution Bouton 3D 00:08:06
    • Les pseudos éléments 00:07:24
    • Les "Floats" et le bug des "Floats" 00:08:09
    • La fusion des marges 00:07:22
    • EXERCICE : Créer une Navbar 00:01:50
    • Résolution exercice Navbar 00:10:46
    • La fonction Calc() en CSS 00:02:38
    • La propriété "overflow" 00:02:38
  • Les transitions et les animations e
    • Comprendre "transform" 00:06:23
    • La perspective en CSS 00:06:47
    • Les transitions 00:09:01
    • Faire une chaîne de transitions 00:04:21
    • Les animations en CSS 00:07:20
    • Création : Faire un texte clignotant 00:11:13
    • Création : Loader en pur CSS 00:06:34
    • Création : Animation underline 00:04:51
  • Utiliser du JavaScript et du CSS ensemble
    • Où placer son JavaScript ? 00:03:19
    • "Const" et les sélecteurs JavaScript 00:07:03
    • Les fonctions 00:01:19
    • Faire notre premier "class toggle" 00:02:58
    • Les événements JavaScript 00:03:48
    • Découvrons d'autres événements 00:02:40
    • Faire une animation d'icône hamburger 00:09:56
  • CSS : Propriétés et notions avancées
    • Faire des dégradés en CSS gratuit 00:04:20
    • Les filtres CSS 00:07:59
    • Créer des tableaux en HTML / CSS 00:10:18
    • Faire une belle création avec "shape-outside" 00:08:18
    • Les "vendors" CSS 00:06:33
    • S'amuser avec "background-clip" 00:03:59
    • Les "sprites" en CSS 00:02:54
    • Découvrir "Clip-path" 00:04:12
    • Faire une page d'accueil avec dégradé + clip-path 00:07:06
    • Le contexte d'empilement 00:06:00
  • L’accessibilité en CSS
    • Introduction à l’accessibilité 00:03:29
    • Les images 00:05:52
    • La sémantique 00:09:33
    • Les formulaires 00:10:52
    • La technique REM + 62.5% 00:07:54
    • Utiliser un lecteur d'écran 00:01:56
    • Comprendre "tabindex" 00:02:45
    • Utiliser les attributs ARIA 00:04:30
    • Faire un bon contraste 00:04:52
    • Faire un audit avec la console 00:06:45
    • Exercice accessibilité intro 00:01:28
    • Résolution 00:06:32
  • Le "Responsive web design"
    • Introduction 00:02:54
    • La balise meta "viewport" 00:03:58
    • Exemples de sites réactifs (responsive) 00:05:46
    • Utiliser max-width / min-width 00:09:08
    • Comprendre les medias queries 00:07:42
    • Gérer le texte de manière "responsive" 00:02:43
    • Utiliser Rem et Em pour du texte réactif 00:05:24
    • Mobile-first / Desktop-first 00:08:17
    • Créer une navbar responsive à 100% 00:13:19
  • Section Flexbox
    • Introduction Flexbox 00:02:46
    • Premier container et la propriété "justify-content" 00:06:08
    • La propriété "align-items" 00:01:38
    • Rangée ou colonne avec "flex-direction" 00:04:54
    • Passage à la ligne avec flex-wrap 00:02:23
    • Les trois propriétés liées aux items (shrink/grow/basis) 00:06:37
    • Gérer la position et l'alignement des items au cas par cas 00:04:43
    • Gérer l'alignement quand on passe à la ligne 00:03:22
    • Changer l'ordre des items 00:02:39
    • Exercice Flexbox intro 00:02:09
    • Résolution 00:08:15
    • Créer une galerie responsive avec Flexbox 00:07:58
    • Barre de navigation responsive avec Flexbox 00:05:47
  • CSS Grid
    • Introduction CSS Grid 00:03:09
    • Création de notre première grille 00:07:29
    • Repeat et Fractionnal Unit 00:02:23
    • Placement avec Grid-Row et Grid-Col 00:03:17
    • Placement sur plusieurs cellules 00:04:17
    • Nommer Colonnes et rangés 00:03:23
    • Nommer une "area" 00:02:03
    • Grille explicite et grille implicite 00:01:30
    • Aligner et centrer ces cellules 00:03:19
    • Aligner et centrer sa grille 00:02:59
    • Max-content et Min-content 00:05:47
    • Autofill, autofit et la fonction MinMax 00:03:55
  • Créer un site de A à Z
    • Mise en place et fichiers source 00:03:44
    • Mise en place typographie 00:08:38
    • Navigation HTML 00:04:04
    • Navigation CSS 00:10:15
    • Responsive de la navbar 00:05:17
    • Section Accueil 00:13:33
    • Section asymétrique HTML 00:05:22
    • Section asymétrique CSS partie 1 00:13:44
    • Section asymétrique CSS partie 2 00:12:18
    • Section asymétrique responsive 00:18:25
    • Parallax 00:04:12
    • Section Tarifs HTML 00:03:00
    • Section Tarifs CSS 00:12:27
    • Section Contact HTML 00:03:50
    • Section Contact CSS 00:10:48
    • Faire en sorte que les liens ferment la navigation 00:03:32
  • Utiliser un préprocesseur CSS
    • Mise en place 00:05:50
    • Les variables et le nesting 00:05:34
    • Les Mixins 00:02:25
    • Fonction SASS 00:01:19
    • "Extend" 00:02:06
    • Les paramètres 00:05:45
    • Utiliser une boucle "for" 00:03:34
    • Error, warn et debug 00:03:06
    • Segmenter son code 00:06:24
  • Utiliser un Framework CSS : Bulma
    • Introduction 00:04:46
    • Typographie partie 1 00:07:20
    • Typographie partie 2 00:10:07
    • Les couleurs 00:03:57
    • Aides 00:04:24
    • Display Responsive 00:03:39
    • Base et taille 00:07:53
    • Responsive 00:03:08
    • Écart 00:03:19
    • Alignement 00:01:33
    • Conteneur et Niveaux 00:06:21
    • Media et Hero 00:03:33
    • Section Footer 00:01:13
    • Fil 00:04:02
    • Inputs et Textarea 00:04:03
    • Select et Checkbox 00:02:39
    • Radio et fichier 00:03:05
    • Box et bouton 00:03:25
    • Contenu et icônes 00:06:19
    • Image, notif et tag 00:03:35
    • Progressbar et Tableau 00:02:33
    • Fil d'Ariane et Carte 00:04:31
    • Bouton déroulant et Menu 00:06:18
    • Message et modale 00:04:37
    • Navigation et pagination 00:09:19
    • Onglets 00:03:13
    • Personnaliser Partie 1 00:08:58
    • Personnaliser Partie 2 00:04:32
    • Projet 1 : Site immo, mise en place 00:03:24
    • Barre de navigation 00:05:18
    • Titre et input 00:07:34
    • Résultat et fin 00:05:55
    • Projet 2, Portfolio, mise en place 00:04:27
    • Barre de navigation 00:04:39
    • Page d'accueil 00:04:21
    • Section à propos 00:03:11
    • Réalisations 00:08:36
    • Formulaire 00:07:04
    • Fin bulma 00:03:10
  • Section JavaScript, les bases
    • Introduction JavaScript 00:03:54
    • Où placer ses scripts ? 00:04:25
    • Comprendre Const et Let 00:04:46
    • Les différents types et le nommage de nos variables 00:06:12
    • Les opérateurs 00:01:38
    • Les chaînes de caractères 00:03:21
    • Créer une fonction en JavaScript 00:04:22
    • Les fonctions classiques 00:05:10
    • L'ordre de déclaration 00:05:17
    • Les conditions : If 00:03:36
    • "If else" 00:03:40
    • Comprendre les valeurs "truthy" et "falsy" 00:07:03
    • Utiliser un Switch 00:03:51
    • Créer une boucle en JS 00:04:06
    • Boucle "while" et "do while" 00:00:00
  • Les tableaux
    • Comprendre et utiliser les tableaux 00:03:29
    • Les méthodes liées aux tableaux 00:02:15
    • Encore des méthodes liées aux tableaux 00:02:22
    • Les méthodes liées aux tableaux troisième partie 00:08:34
    • Utiliser des fonctions de rappels (callback) sur les tableaux. 00:13:17
    • Utiliser une boucle avec des tableaux 00:01:52
  • Les chaînes de caractères
    • Les méthodes liées aux chaînes 00:00:00
    • Utiliser les "regex" 00:00:00
    • La méthode "replace" 00:01:19
  • Les objets
    • Comprendre les objets 00:06:40
    • Valeurs primitives vs références 00:04:45
    • Delete et bracket/dot notation 00:00:00
    • Les tableaux sont des objets 00:00:00
    • Les tableaux sont des objets 00:00:00
    • Comprendre le mot clé "this" 00:02:20
    • Mot clé "this" seconde partie 00:00:00
    • La méthode bind() 00:00:00
  • Le DOM (Document Object Model)
    • Comprendre le DOM 00:02:14
    • Sélectionner des éléments du DOM en JS 00:00:00
    • Sélectionner parent/enfant/même niveau 00:05:21
    • Styliser un élement du DOM 00:00:00
    • Créer et insérer un élément 00:00:00
    • Supprimer un élément 00:00:00
    • Les événements et gérer les propriétés d'un événement 00:07:44
    • Les événements les plus utilisés 00:00:00
  • Faire de l’asynchrone en JS + manipuler une API
    • Utiliser setTimeout() & setInterval 00:06:29
    • Comprendre les promesses 00:06:00
    • Utiliser async await 00:03:14
    • Qu'est ce qu'une API ? 00:04:00
    • 176-xhr-basic-call.mp4 00:05:05
    • Visualiser les données et pouvoir les utiliser 00:02:51
    • Créer une liste à partit des données 00:08:26
    • La méthode fetch() 00:00:00
  • Qu'est ce que le JavaScript ES6 ?
    • Intro ES6 00:02:57
    • Let et const dans le détail 00:00:00
    • Les fonctions fléchées rappel 00:07:27
    • Les template literals 00:02:35
    • Spread operator 00:02:22
    • Rest operator 00:01:02
    • Paramètre par défaut 00:01:17
    • Export-Import 00:03:33
  • Créer et comprendre des formulaires (HTML / CSS / JS)
    • Introduction formulaire 00:02:52
    • Les formulaires : Théorie 00:03:28
    • Les inputs de bases 00:06:19
    • Les labels 00:01:34
    • Textarea, select et datalist 00:07:46
    • Checkbox, radio et color 00:03:57
    • Les requêtes GET et POST 00:05:44
    • La validation 00:12:38
    • Projet 1 : Login 00:03:26
    • Projet 1 : CSS 00:08:23
    • Projet 2 : Accueil type Airbnb 00:04:03
    • Projet 2 : CSS 00:14:12
    • Projet 3 : Page d'accueil complète et form animé 00:05:40
    • CSS Partie 1 00:08:33
    • Animation CSS 00:09:02
    • Fin du CSS 00:09:06
    • Anim JS et CSS 00:06:12
    • Projet 4 : Formulaire de paiement 00:06:51
    • CSS Partie 1 00:10:20
    • CSS Partie 2 00:05:01
    • Partie JS 00:06:22
    • Projet 5 : Formulaire de contact 00:06:35
    • Fin section formulaire 00:08:23
  • Les paradigmes de programmation en JavaScript
    • Introduction programmation fonctionelle 00:02:34
    • Les fonctions pures 00:00:00
    • Fonction d'ordre supérieur + immutabilité 00:05:27
    • Utiliser des fonctions comme expression 00:03:03
    • La programmation orienté objet : les objets 00:03:12
    • Utiliser des classes 00:03:49
    • Les constructeurs natifs en JavaScript 00:01:48
    • Créer des méthodes dans nos classes 00:01:30
    • Faire des chaînes de méthodes 00:04:36
    • Les sous-classes 00:02:15
    • Comprendre le prototype 00:04:22
    • Les fonctions constructeur 00:05:21
  • Créez des animations javascript avec l'HTML Canvas
    • Mise en place 00:02:09
    • Notre premier Canvas 00:04:27
    • Les méthodes liés au Rectangle 00:03:44
    • Dessin de trajets 00:02:34
    • Création d'un dégradé 00:05:50
    • Dessin de lignes et d'un triangle 00:03:23
    • Les cercles 00:04:53
    • Ajouter du texte 00:02:34
    • Modifier la hauteur et largeur 00:02:29
    • Faire un Canvas responsive 00:04:37
    • Save et Restore 00:02:35
    • Translate 00:03:23
    • Rotate 00:03:12
    • Les images 00:03:05
    • Faire une animation avec "requestanimationframe" 00:06:24
    • Effet de souris 00:03:05
    • Projet système solaire 00:11:11
    • Fin Projet système solaire 00:06:27
    • Rosace : Mise en place 00:01:59
    • Fin projet Rosace 00:08:02
    • Détecter les collisions 00:03:13
    • Introduction Canvas 00:02:34
    • Fin détection de colission 00:11:04
  • Utiliser la librairie d'animation Greensock.js
    • Introduction Greensock 00:06:07
    • Les méthodes "to","fromto",from" 00:10:11
    • Les "easings" 00:04:16
    • Appeler des fonctions de rappel avec GSAP 00:04:29
    • Animer plusieurs éléments + delay 00:07:58
    • Créer une timeline 00:04:21
    • Gérer le déclenchement des animations 00:04:22
    • Les méthodes et propriétés liées aux "Timelines" 00:05:04
  • Gérer le Design d'un site
    • Choisir une bonne typographie 00:07:54
    • Créer des maquettes, prototypes et "wireframes". 00:03:32
    • Choisir des couleurs 00:06:54
  • Introduction à React
    • Introduction 00:04:38
    • Mise en place d'un projet React 00:06:29
    • Explication des fichiers 00:05:49
    • Explication des composants 00:10:30
    • Gérer le CSS avec React 00:02:46
    • Gérer les événements avec React 00:02:07
    • Utiliser du "state" avec "useState()" 00:05:00
    • Comprendre les "props" 00:04:06
    • Remonter des données enfant-parent 00:08:14
    • Projet to-do liste 00:07:30
    • Créer un formulaire 00:06:26
    • Créer et afficher des cartes 00:10:51
    • Rajouter des cartes avec le formulaire 00:05:14
    • Fin to-do liste 00:07:41
  • Aller plus loin
    • Et après ? 00:05:47



Formateur : Enzo Ustariz

Enzo Ustariz a publié 41 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 192 tutoriels vendus. Voir les autres formations de Enzo Ustariz

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de johan65 laissé le 11/08/2020
    Superbe formation, très complète et assez longue ! Mais il y a tellement à savoir que 28h c'est pas grand chose au final ! Toutes les bases pour démarrer sont là. Bravo Enzo on sent tout ton enthousiasme, ta passion du code et ton talent de dév front ;)
    "Merci beaucoup et à très vite :)"

  • 5
    avis de alain_du_lac laissé le 07/08/2020
    Ce cours est une gageure : donner une vue d'ensemble du développement WEB, coté utilisateur, mais ce pari est réussi ! Enzo est un formateur enthousiaste. On sent qu'il a envie de partager ses compétences qui sont grandes. Merci à lui
    "Merci beaucoup pour ce retour Alain et à bientôt !"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1237 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données