Codez votre premier site web

Créez et designez votre site avec HTML/CSS et Bootstrap. Mettez-le en ligne, configurez votre nom de domaine et suivez votre traffic sur Google Analytics.

A propos de ce cours

Vos premiers pas en développement web

Découvrez HTML / CSS et la librairie de prototypage Bootstrap.

Mettez votre site en ligne sur Github. Soignez votre SEO, intégrez Google Analytics pour suivre votre traffic et d'autres services comme Mailchimp, Gmaps, Wufoo pour récupérer les emails de vos visiteurs.

A qui ce cours est-il destiné ?

  • Débutants
  • Entrepreneurs Tech
  • Designers
  • Founders

Formule tout compris

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

Ce que vous allez apprendre

  • Fondamentaux en HTML & CSS
  • Grille et composants Bootstrap
  • Ressources & outil de web-design
  • Deploiement sur Github
  • Implémentation de Google Analytics
  • Insertion de formulaires Mailchimp & Wufoo
Forum codez votre premier site web

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.

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
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
Superbe initiative et bonnes ressources proposées. Keep going, votre modèle très qualitatif vaut vraiment le premium versus d'autres Mooc moins onéreux :) beaucoup plus convivial et interactif.
13301177?v=3
Impressionné par la qualité des contenus. Ce qui semblait rébarbatif auparavant est un vrai plaisir à apprendre maintenant. Bravo ! Beau boulot .
13500365?v=4

Le Programme

1 Installer les outils du développeur web

Installez et maîtrisez Sublime Text et Google Chrome,
les outils essentiels du développeur web.

  • Introduction

    00:09
  • Installer Sublime Text

    00:30
  • Travailler avec Sublime Text

    01:02
  • Installer Chrome

    03:39
  • Outils de développeur dans Chrome

    04:05

2 Fondamentaux en HTML

Codez votre première page & retenez les principales balises
de meta-données et de contenu.

  • Qu’est ce qu’une page web ?

    00:12
  • Syntaxe d’une balise

    00:35
  • Squelette d’une page, doctype, head et body

    01:37
  • Meta-données: title & charset

    02:23
  • Live-code - coder son squelette HTML

    03:03
  • Balises de contenus classiques

    06:44
  • Live-code - ajouter un premier contenu

    08:24
  • Live-code - insérer des icônes NounProject

    11:20

3 Fondamentaux en CSS

Apprenez les bases de CSS pour gérer votre charte graphique.
Découvrez des outils comme Kuler ou Google fonts pour personnaliser vos polices & couleurs.

  • Le web sans CSS

    00:20
  • Organiser son projet

    01:49
  • Lier sa feuille de style dans le HTML

    02:15
  • Syntaxe et vocabulaire CSS

    02:39
  • Pseudo-classe :hover

    03:37
  • Propriétés et systèmes de couleur

    04:11
  • Propriétés d’arrière-plan

    05:31
  • Live-code - Ajout d’une feuille de style

    06:12
  • Live-code - Adobe kuler

    06:31
  • Live-code - Ajout une texture d’arrière-plan

    10:49
  • Live-code - Designer ses textes et ses liens

    14:21
  • Live-code - intégrer des Google fonts

    16:38

4 Font Awesome & Colorzilla

Une vidéo bonus pour apprendre à manipuler des icônes FontAwesome,
très pratiques pour toutes les icônes utilitaires (enveloppe mail, rouage de settings, download, réseaux sociaux, etc…),
ainsi que la pipette de couleur Colorzilla.

  • Intégrer Fontawesome

    00:00
  • Retoucher ses icône Fontawesome avec CSS

    01:27
  • Utiliser la pipette Colorzilla

    01:51

5 CSS Avancé

Allez plus loin en HTML et CSS
pour structurer et designer vos pages plus finement.
Vous aurez besoin de ces notions pour comprendre Bootstrap.

  • Rappels sur les sélecteurs CSS

    00:13
  • Sélecteurs d’id et de class

    01:27
  • class ou id ?

    03:22
  • Live-code - sélecteurs d’id et de class

    03:42
  • Combiner id et class

    06:34
  • Sélecteurs descendants

    08:13
  • Live-code - composition de class et d’id

    08:52
  • Live-code - spécificité des sélecteurs

    10:20
  • Encapsuler ses contenus dans des div

    13:01
  • Live-code - structure de page avec des div

    14:44
  • Le modèle de boîte: margin et padding

    16:07

6 Bootstrap - setup & présentation

Intégrez Bootstrap, la librairie CSS la plus utilisée par les startups web.
Démarrer vos pages Bootstrap avec le bon squelette HTML et apprenez à lire la documentation en ligne.

  • Squelette HTML de démarrage

    00:43
  • Explication du boilerplate Bootstrap

    01:33
  • Style de base: police et liens

    02:36
  • Live-code - navbar Bootstrap

    03:34
  • CSS Bootstrap - boutons

    05:56
  • CSS Bootstrap - images

    06:21
  • Composants Bootstrap - labels

    07:07
  • Live-code - appliquer les classes Bootstrap

    07:36

7 La grille Bootstrap

Devenez des boss de la grille Bootstrap, qui permet de positionner
ses élèments de page de façon “responsive”.

  • Fondamentaux - container / row / col

    01:14
  • Mise en page à 2 colonnes

    02:34
  • Retour de ligne

    02:50
  • Live-code - 2 colonnes 50%-50%

    03:08
  • Live-code - 2 colonnes responsive

    05:15
  • Visualiser sa grille avec Chrome

    06:30
  • Règle de la dernière classe

    07:17
  • Live-code - 4 colonnes responsive

    07:57
  • Récapitulatif

    10:56

8 Live-code final IceMe

Un grand live-code de 30 minutes qui reprend toutes les notions et finalise la page d’accueil de IceMe.

  • Meta-données

    00:33
  • General - textures et polices

    01:06
  • Footer - design

    04:32
  • Bannière - image d’arrière plan

    10:23
  • Bannière - design des textes

    14:33
  • Features - design des fonctionnalités

    18:03
  • Navbar - fixation en haut de page

    22:08
  • Navbar - changement du contenu

    22:55
  • Navbar - customisation

    25:11

9 Déployer son site

Versionner votre travail avec git et surtout mettez votre site en ligne sur Github.

  • Installer l’app Github

    00:23
  • Premier setup de l’app

    01:19
  • Créer un repository git

    02:29
  • Créer la branche magique, gh-pages

    03:12
  • Faire un commit

    05:03
  • Publier sur Github

    07:02
  • Construire l’URL magique de Github Pages

    08:08

10 Acheter & configurer son domaine

Un nom de domaine personnel, c’est tout de même plus classe qu’une URL Github nan ?

  • Achat du domaine

    00:36
  • Création d’un email professionnel

    04:42
  • Configuration côté OVH

    06:09
  • Configuration côté code-source

    08:03
  • Récapitulatif

    09:44

11 Intégrer Mailchimp et Wufoo

Intégrez des formulaires HTML avec Wufoo et Mailchimp pour récoltez des emails pour vos newsletter et des données sur vos utilisateurs.

  • Récupération du projet IceMe

    01:15
  • Wufoo - signup

    03:43
  • Wufoo - création de formulaire

    04:46
  • Wufoo - nom & infos du formulaire

    04:56
  • Wufoo - ajout d’autres champs

    05:42
  • Wufoo - code à intégrer

    08:56
  • Wufoo - insertion dans une modal Bootstrap

    09:49
  • Wufoo - dashboard des nouvelles entrées

    17:05
  • Wufoo - commit & synchronisation du travail

    18:43
  • Mailchimp - signup

    20:22
  • Mailchimp - dashboard, campagnes, listes

    21:23
  • Mailchimp - création de liste

    21:57
  • Mailchimp - code à intégrer

    23:11
  • Mailchimp - designer son formulaire avec Bootstrap

    24:43

12 Carte Gmaps personnalisée

Ajoutez une page de contact, intégrer une carte Gmaps & personnalisez son thème avec SnazzyMaps.

  • Ajouter d’une page HTML de contact

    00:41
  • Lier ses deux pages dans la navbar

    02:34
  • Ajouter une grille Bootstrap d’infos de contact

    05:08
  • Icônes Fontawesome de contact

    07:20
  • Code de carte Gmaps à intégrer

    09:02
  • Trouver les coordonnées GPS

    10:40
  • Changer du thème de la carte avec Snazzymaps

    11:20
  • Commit & synchronisation du travail

    13:09

13 SEO & Google analytics

Apprenez les fondamentaux du SEO quand on code, et intégrez Google analytics pour suivre et comprendre votre audience.

  • Zones d’une recherche Google

    00:50
  • Crawling et indexation - grand principes

    01:17
  • Se faire découvrir par Google

    02:54
  • Structure d’un résultat Google

    04:12
  • Title et meta-description

    05:28
  • Bonnes pratiques pour le référencement

    05:57
  • Images et description alternative

    07:34
  • Page rank

    08:38
  • Meta-données Facebook & Twitter

    09:31
  • Google Analytics - créer un code de suivi

    12:07
  • Google Analytics - mettre le code de suivi dans son HTML

    13:28
  • Google Analytics - commit & synchronisation du travail

    14:24
  • Google Analytics - rapports de suivi

    15:03
  • Conclusion du programme

    16:41
Codez votre premier site web
99 € accès à vie
  • 13 cours vidéos & leur quiz
  • 4 heures d'explication
  • 113 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