• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/11/2022

Tirez un maximum de ce cours

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bienvenue !

Le cours sur lequel vous vous trouvez est le tout premier cours qui a été créé sur notre plateforme. C’était il y a plus de 20 ans, mais rassurez-vous, ce cours est régulièrement mis à jour ! La preuve, il y a quelques années, il ressemblait à ça :

duYR2Cv3RfJJvU_1YmBw3SQJ1ji-kVR7Dha-sOGZM2Ze_dPaYOHEIbpfK7U-oHTfSFw08Trn9btdQkTi72dad88BOB-XkzwVrGgQODIvTDYmBGeYr39lz2mJQM-zkDczYvOksIT1KF_uZuBshBMZMPaxcxy66dCmgky-qb2ED-98zDNPJACb4r74aw

Un site web aujourd’hui n’a plus du tout l’apparence de ce que vous voyez juste au-dessus (c’est pourquoi il est important de se tenir à jour, régulièrement : le Web bouge et les tendances évoluent).

Heureusement pour vous, dans ce cours, vous allez apprendre à réaliser un site web moderne avec HTML et CSS, comme celui-ci :

Rencontrez vos professeurs

Pour vous guider, vous n’aurez pas un, mais deux professeurs.

Mathieu Nebra, que vous retrouverez dans les vidéos et le texte du cours. Et Alexia, avec qui vous mettrez en pratique tout ce que vous apprendrez !

Mathieu Nebra est cofondateur d’OpenClassrooms. Mais il est aussi le premier enseignant de la plateforme ! Tous ses cours sont très suivis et appréciés. Nous les mettons progressivement à jour pour qu’ils correspondent à ce que nous savons faire de mieux en termes de multimédia et de pédagogie.

[VIDEO MEET YOUR TEACHER]

Mathieu a écrit la toute première version de ce cours lorsqu’il a fondé ce qui allait devenir OpenClassrooms. Vous vous trouvez sur un cours mythique de la plateforme, le premier en termes de popularité !

Alexia Toulmet est développeuse web. Passionnée par le front-end, elle aime travailler à la frontière du design et du développement. Lorsqu'elle n'est pas en train de coder, elle profite de son temps pour enseigner le développement.

[VIDEO MEET YOUR TEACHER]

Alexia a construit le projet fil rouge que vous allez suivre dans ce cours. Le site web, qui va vous servir de modèle pour apprendre à développer en HTML et CSS, est d’elle aussi ! Enfin, c’est elle qui a mis au point tous les exercices que vous allez réaliser.

Découvrez le projet fil rouge du cours

[BANNER FIL ROUGE]

Tout au long de ce cours, vous allez réaliser de petits exercices afin de construire, brique par brique, le site professionnel d’un personnage fictif : Robbie Lens, photographe freelance. Cette dernière a besoin d’un site web pour :

  • se présenter ;

  • mettre son travail en valeur grâce à un portfolio ;

  • être contactée plus simplement, en ligne.

Si vous voulez un petit aperçu, vous pouvez aller jeter un œil à la version finale du site que l’on va construire pour elle. Cela vous donnera un avant-goût de ce que vous serez capable de faire à la fin de ce cours.

Chaque connaissance acquise dans un chapitre permettra d'ajouter une nouvelle pierre à l'édifice : vous pourrez ajouter des fonctionnalités et améliorer le style du portfolio de Robbie Lens progressivement.

Découvrez le fonctionnement du cours

Dans ce cours, vous allez avoir une véritable expérience pratique des concepts que vous aborderez dans chaque chapitre. L'idée est d'apprendre en faisant ! 

Pour ce faire, vous aurez besoin :

  • d’un navigateur web à jour (Chrome, Safari, Firefox ou encore Edge) pour voir en direct le résultat de ce que vous codez ;

  • d’un éditeur de code. Dans toutes les démonstrations de code que vous verrez, nous utiliserons Visual Studio Code.

Sur le projet GitHub de ce cours, nous trouverez un système de branches : chaque exercice, chaque solution se situe sur sa propre branche. Par exemple, l’exercice de la partie 1 chapitre 4 se trouve sur la branche P1C4-exercice ; la solution se trouve sur la branche P1C4-solution.

Même si vous n'êtes pas familier de ce système, on vous accompagnera dans votre utilisation au fur et à mesure, en vous donnant directement le lien sur lequel trouver le code, donc pas de panique !

Ce qu’il faut retenir :

  • Le cours est divisé en 4 parties de plusieurs chapitres.

  • Chaque chapitre commence par une vidéo. Vous y trouverez des démonstrations de code essentielles, et des explications.

  • Sous chaque vidéo, vous trouverez du texte, qui vous permettra d’approfondir les notions importantes, et un exercice corrigé qui vous permettra de construire un site web, chapitre après chapitre.

  • Pour vous aider à pratiquer, vous trouverez aussi des bacs à sable de code via des liens que l'on vous donnera dans le texte du cours.

  • Enfin, chaque partie se conclura par un quiz où vous pourrez vérifier vos acquis, et déterminer les points sur lesquels vous devez revenir.

Téléchargez la fiche résumé du cours

Vous pouvez d’ores et déjà consulter le résumé du cours.

Ah bon ? Mais c’est un peu de la triche, non ?

Certes, vous démarrez tout juste ce cours, mais rien ne vous empêche de prendre la température et d’avoir une vision globale de ce que vous allez apprendre. Imprimez cette fiche ou gardez-la dans un onglet de votre navigateur pendant que vous apprenez. Cela vous servira de mémo pour assimiler les informations essentielles. Cela dit, cela ne vous permettra pas de faire les exercices ou de passer les quiz sans réfléchir un minimum !

[FICHE RESUME]

Un conseil avant de commencer : si vous êtes coincé, n'ayez pas peur de recommencer. Le principal est d’y aller à votre rythme, de préférence en vous amusant.

Vous avez maintenant toutes les cartes en main pour démarrer votre apprentissage du HTML et du CSS en toute sérénité ! Plongez au cœur de la pédagogie OpenClassrooms qui nous tient tant à cœur et nous, on vous souhaite une excellente expérience d’apprentissage !

On se retrouve au prochain chapitre. À tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite