1189312?v=3

Grâce à Alban, bénéficiez de 30€ de réduction sur l'achat de cette track !

Devenez développeur front-end

Passez la vitesse supérieure ! Créez vos propres icônes, designez et animez vos sites avec SASS & jQuery. Codez vite des sites beaux, propres & maintenables.

A propos de ce cours

  • Designez vous-même vos icônes avec Sketch.
  • Maîtrisez les techniques de mise en page avancées en CSS (en codant par exemple une sidebar fixée)
  • Simplifiez votre code CSS grâce à SASS et customisez votre thème Bootstrap pour donner du cachet à votre site.
  • Ajoutez des animations avec CSS3 ou en utilisant la librairie javascript jQuery.

A qui ce cours est-il destiné ?

  • Première expérience requise en HTML / CSS
  • Graphistes
  • Entrepreneurs Tech
  • Designers

Formule tout compris

  • 21 cours vidéos & leur quiz
  • 6 heures d'explication
  • 190 objectifs à accomplir
  • Des réponses à vos questions par les profs du Wagon

Ce que vous allez apprendre

  • Setup & outils de front-end avancés
  • Rappels en HTML / CSS / Bootstrap
  • Design d’icônes avec Sketch
  • Techniques de positionnement CSS
  • Puissance du design avec SASS
  • Animation CSS3 et jQuery
Forum devenez developpeur front end

Bien plus qu'un cours en ligne, une communauté tech

Pose tes questions à des professionnels qui te répondront chaque semaine: Sébastien (ex-Google et CTO du Wagon), Martin (data-scientist chez Airbnb), Boris (CEO-fondateur du Wagon).

Bien mieux que StackOverflow ou que n'importe quel cours de code en ligne, on te donnera des explications simples, des morceaux de code et des liens vers les dernières ressources pour rester à la page.

Rejoins une communauté tech d'une grande qualité pour apprendre dix fois plus vite.

Avant, j'étais sur Codecademy et vous avez vraiment l'avantage de donner un tas de conseils et de recommandations qui font gagner un temps fou, alors en un mot : super
13966976?v=3
Cours impeccables, interactifs, progressifs, on peut les suivre à son rythme, mettre en pause, s'exercer, revenir en arrière... Appliqués à un projet, c’est vraiment motivant.
12375597?v=3
Profs pédagogues et sympas, interface agréable. Que du plaisir en plus d'être hyper efficace ! Tout est expliqué de A à Z, contrairement à Codecademy ou à des tutos youtube.
11291089?v=3
J'apprécie le style clair et direct des vidéos. Je suis très impressionnée par le progrès que j'ai fait en quelques jours par rapport à ce que j'ai appris ailleurs pendant plusieurs semaines.
12845838?v=3

Le Programme

1 Setup avancé du développeur front-end

Installez Github, Sketch, les plugins Chrome et
les packages Sublime Text pour travailler 15 fois plus vite.

  • Github

    00:12
  • L’application Github

    00:43
  • Installer Sublime Text

    02:05
  • Installer des packages Sublime Text

    02:15
  • Emmet, Color Picker, Color Highlighter

    02:53
  • Live-code - Emmet, générer son HTML à la volée

    03:40
  • Live-code - Color Picker, insérer une couleur HEX dans son CSS

    04:58
  • Live-code - Color Hightlighter, visualiser ses couleurs hexadecimales

    05:33
  • Sip - pipette de couleur pour Mac

    05:52
  • Colorzilla - pipette de couleur pour Chrome

    06:33
  • FontFace Ninja - inspirez vous des polices des autre

    06:50
  • Installer Sketch

    07:34

2 Rappels - HTML & utilisation de Emmet

Des rappels sur les fondamentaux de HTML. Mais aussi un live-code pour vous apprendre
à coder vos pages HTML en 5 secondes chrono avec le package Emmet de Sublime Text.

  • Les 3 technologies front-end

    00:08
  • Rappels - principe de base du markup HTML

    00:48
  • Rappels - squelette HTML d’une page

    01:38
  • Rappels - balise <title> et Google

    02:23
  • Meta-description Google

    03:07
  • Meta-données Open-Graph pour Facebook

    03:32
  • Meta-données Twitter

    04:54
  • Rappels - syntaxe de base HTML

    05:13
  • Rappels - balises standard (titres, textes, listes, images)

    06:29
  • Balises de tables

    07:39
  • Balises de formulaire

    08:03
  • Live-code - page de profil

    08:34
  • Live-code - générer son contenu HTML avec Emmet

    09:50
  • Live-code - Indent or Die

    15:17
  • Live-code - icônes fontawesome de réseaux sociaux

    16:07

3 Rappels - Charte graphique en CSS

Des rappels sur les fondamentaux de CSS.
Mais aussi un live-code et une méthodologie pour gérer en 10 lignes de CSS votre charte de polices et de couleurs.

  • Rappels - Un site sans CSS

    00:17
  • Rappels - Lier sa feuille CSS

    01:10
  • Rappels - Vocabulaire CSS

    01:57
  • Rappels - Recherche Google CSS

    02:14
  • Rappels - Couleurs et polices

    02:46
  • Rappels - Encodage de couleur

    02:59
  • Rappels - L’échelle de gris en RGB

    03:34
  • Rappels - Textes vs. arrière-plan

    03:55
  • Rappels - Design de textes

    04:06
  • Rappels - Familles de police

    04:22
  • Rappels - Font-size, letter-spacing, font-weight

    04:49
  • Live-code - charte graphique CSS

    05:42

4 Rappels - div et box-model

Quelques rappels sur le modèle de boîte. Surtout, plein de tips pour designer vos divisions (arrondi, techniques d’ombrage).

  • Internet, un monde de div

    00:11
  • Box-model - height et width

    00:36
  • Box-model - padding et margin

    00:55
  • Box-model - border

    01:15
  • Box-model - border radius

    01:32
  • Box-model - box shadow

    02:01
  • Box-model - unités en CSS

    02:22
  • Live-code - découper sa page en div

    02:56
  • Live-code - indentation multi-lignes Sublime Text

    04:10
  • Live-code - designer ses div en CSS

    05:18
  • Live-code - killer technique d’ombrage

    06:35

5 Rappels - Sélecteurs d'id et de class

Quelques rappels sur les sélecteurs d’id et de class, le minimum vital pour différencier les éléments de vos pages et les designer.

  • id et sélecteur

    00:43
  • class et sélecteur

    01:23
  • class ou id ?

    02:07
  • Combinaison de classes

    02:33
  • La convention qui change la vie

    03:36
  • Décollez le nez de l’écran !

    04:20

6 Sélecteurs avancés et bonnes pratiques CSS

Découvrez la bonne façon de nommer vos classes CSS pour les rendre ré-utilisables.

  • Rappels - sélecteur d’élément

    00:04
  • Rappels - sélecteur de classe

    00:11
  • Rappels - sélecteur d’id

    00:29
  • Rappels - sélecteur descendant

    00:39
  • Rappels - sélecteur groupé

    01:10
  • Rappels - pseudo-classe

    01:19
  • Rappels - spécificité de sélecteurs

    01:30
  • live-code - objectif

    02:23
  • live-code - design des cards

    03:01
  • live-code - technique de centrage

    03:51
  • live-code - image arrondie

    05:31
  • live-code - design de bouton

    07:07
  • live-code - liste horizontale

    08:33

7 Inline, block, techniques de flottement - dashboard

Maîtrisez les techniques classiques de mise en page pour “inliner” vos listes.
Construisez un dashboard en utilisant des techniques de flottement avancées.

  • Elements block

    00:10
  • Elements inline

    01:07
  • Elements inline-block

    01:31
  • Technique de centrage

    02:10
  • Layout flottant à gauche

    02:37
  • Layout flottant à droite

    03:35
  • Layout flottant combiné

    04:45
  • Layout flottant avec wrapper

    05:20
  • Live-code - dashboard

    06:28

8 Positionnement relatif et absolu - boutons de partage

Comprenez enfin les positionnements relatif et absolu en plaçant des boutons de partage sur vos divisions.

  • Positionnement relatif

    00:02
  • Positionnement absolu

    00:24
  • Exemple : Absolute dans Relative

    00:42
  • Live-code : liens de partage du footer

    02:16

9 Positionnement fixé - fixed sidebar

Utilisez le positionnement fixed pour construire une sidebar immobile lorsqu’on scroll sur la page. Cool, non ?

  • Positionnement fixe

    00:01
  • Live-code : fixed sidebar

    00:42
  • Live-code : liens internes

    06:19

10 Design et construction d'icônes avec Sketch

Soyez le MacGyver du design. Une dizaine de ressources, quelques techniques sur Sketch, et vous serez capables de construire vos propres icônes, badges et arrière-plans.

  • Pourquoi maîtriser Sketch ?

    00:27
  • Re-dimensionnement d’images, la base de la base

    01:34
  • Culture UI, à lire !

    02:00
  • Ressources, images

    02:40
  • Ressources, couleurs

    04:26
  • Ressources, polices

    05:46
  • Ressources, icônes

    07:18
  • Ressources, stay tuned

    08:16
  • Live-code : construction d’icônes sur Sketch

    09:50

11 Le meilleur de Bootstrap

Vous avez déjà entendu parler de Bootstrap ? Jamais de façon si simple et synthétique !
Un condensé des classes les plus utiles de la librairie et plein d’exemples d’utilisation.

  • Pourquoi Bootstrap ?

    00:17
  • Démarrer une page HTML Bootstrap

    00:47
  • Bootstrap, la synthèse de ce qui sert !

    01:10
  • Bootstrap, schéma de couleur

    01:22
  • Bootstrap, alignement de textes

    01:51
  • Bootstrap, liste en-ligne

    02:14
  • Bootstrap, classes d’image

    02:35
  • Bootstrap, classes de boutons

    02:55
  • Bootstrap, input de formulaire

    03:21
  • Bootstrap, formulaire en-ligne

    03:45
  • Bootstrap, la documentation

    04:05
  • Live-code : maquette Bootstrap v1

    04:18
  • Live-code : CSS perso

    13:19
  • Live-code : architecture CSS

    14:30

12 Prototypage avec la grille Bootstrap

Maîtriser à fond la grille Bootstrap pour maquetter des sites en deux temps trois mouvements.

  • Grands principes de la grille

    00:54
  • Container, row, col

    01:30
  • Exemple : mise en page à 2 colonnes

    03:00
  • 3 X 6 = 18 ?

    03:36
  • Exemple : mise en page à 4 colonnes

    04:04
  • Technique d’offset

    04:53
  • Technique d’offset

    04:53
  • Live-code : la grille en action

    05:32

13 Introduction au templating et à SASS

On commence les choses sérieuses: le templating & SASS.
Vous allez voir, impossible de revenir à HTML et CSS ensuite !

  • Pourquoi des templates ?

    00:29
  • Pourquoi SASS ?

    02:51
  • Pourquoi Middleman ?

    04:41
  • Setup - Installation de Middleman

    05:17
  • Setup - Boilerplate de démarrage

    05:25
  • Setup - Premiers pas sur le boilerplate

    07:47
  • Setup - Commandes basiques sur le terminal

    08:09
  • Setup - Installation des librairies ruby

    10:01
  • Setup - Lancer un serveur local

    10:33
  • Architecture du projet

    11:22
  • Extension de fichier et balises ERB

    11:44
  • Boucler avec ERB

    13:42

14 Templating - layout & helpers

Découvrez comment construire un layout partagé par toutes les pages de votre site,
et comment gérer la problématique des URLs grâce aux helpers.

  • Layout

    00:05
  • Live-code - présentation du layout

    01:04
  • Live-code - <title> dynamique

    03:52
  • Live-code - ajout d’une page ERB

    07:08
  • Live-code - Page d’accueil et layout

    08:17
  • Problématique des URLs

    15:11
  • Helpers d’image et de lien

    16:01
  • Helpers - syntaxe basique

    16:23
  • Helpers - syntaxe avancée

    16:44
  • Helpers - à retenir

    17:34
  • Live-code - les helpers en action

    17:52

15 SASS - organisation des feuilles de style

Pas évident d’architecturer son code SASS pour un débutant. On vous montre notre méthodologie, qui va changer votre façon “d’organiser votre design” et vous rendre 50 fois plus productif !

  • SASS vs. SCSS

    00:34
  • SASS - partials

    00:56
  • SASS - variables

    01:24
  • SASS - imbrication

    01:58
  • SASS - chaînage

    02:15
  • SASS - organisation des partielles

    02:58
  • SASS - couleurs et polices

    03:26
  • SASS - layout, composants, pages

    03:44
  • Live-code: architecture du code SASS

    05:48
  • Live-code: variables graphiques

    07:08
  • Live-code: variables SASS bootstrap

    09:46
  • Live-code: partielles de layout/composants/pages

    14:41
  • Live-code: dossier layout

    16:20
  • Live-code: dossier composants

    18:00
  • Live-code: dossier pages

    18:29

16 SASS - variables, imbrication, chaînage

Maîtrisez les notions clefs de SASS pour écrire du code concis et cohérent.
Customisez votre navbar en 5 secondes. Intégrez les plus belles polices pour donner du cachet à votre site.

  • Live-code - Récupération du design de la home-page

    01:30
  • Live-code - Refacto SCSS

    02:09
  • Live-code - Récupération du design du footer

    03:24
  • Live-code - Refacto SCSS

    04:08
  • Live-code - Customiser sa Navbar

    06:34
  • Live-code - Polices avancées

    09:39

17 Versionner et déployer son site web

Versionnez votre travail avec l’application Github et mettez votre site en ligne en une ligne de commande.

  • Versionner son travail

    00:26
  • Synchroniser avec Github

    02:00
  • Déployer avec Middleman

    04:36
  • L’URL magique Github Pages

    05:55

18 Bases de données de texte avec YAML

Découvrez la puissance de YAML pour gérer de mini-bases de données. Les possibilités sont infinies. Tous les contenus du Wagon On-Demand sont rédigés en YAML !

  • Où répète-t-on des données sur un site ?

    00:14
  • Live-code : insérer des témoignages avec YAML

    00:43
  • Live-code : mise en ligne

    13:09

19 Animations en CSS

Vous pensez qu’il n’y a que Javascript pour faire de l’animation ? Et bien non, on peut faire des trucs très cools avec CSS.

  • Définir un keyframes

    00:08
  • Les vendor prefix

    00:42
  • Propriété CSS animation

    01:17
  • Live-code : coder sa première animation CSS

    02:01
  • Live-code : utiliser une librairie d’animation

    08:19

20 Animations en jQuery

Découvrez les bases de jQuery et faites le tour des animations classiques: changement de navbar, modale, smooth scroll et effets d’apparition.
Vous en prendrez plein la vue !

  • Qu’est-ce-que jQuery ?

    00:03
  • La fonction dollar

    00:22
  • Révéler et cacher des éléments

    01:00
  • Changer les règles CSS

    01:06
  • Ajouter et retirer des classes CSS

    01:17
  • Lire et changer le contenu d’une balise

    01:39
  • Live-code : manipulation de base dans la console JS

    02:09
  • Définir des évènements jQuery

    10:47
  • Evènement et fonction de callback

    11:09
  • Les évènements les plus classiques

    12:23
  • Live-code : Définition d’évènements dans la console

    12:37
  • Animations classiques

    17:15
  • Live-code : modale Bootstrap

    17:21
  • Live-code : navbar dynamique

    26:48
  • Live-code : smoothscroll sur des liens internes

    32:05
  • Live-code : animations de scroll reveal

    40:05
  • Live-code : mise en ligne

    46:51

21 Conclusion

Il est temps de faire le point sur tout ce qu’on a appris ensemble, et de se dire à bientôt !

  • Quelques mots pour la fin

    00:01
Devenez développeur front-end
J'utilise les 30 € du parrainage de Alban
149 € 119 € accès à vie
  • 21 cours vidéos & leur quiz
  • 6 heures d'explication
  • 190 objectifs à accomplir
  • Des réponses à vos questions par les profs du Wagon
Déjà un compte GitHub ? Connectez-vous
ou regarder la première vidéo gratuitement.

Merci !

Paiement en cours