• 15 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 19/01/2023

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.

Le Web bouge et les tendances évoluent (les sites web n'ont donc aujourd'hui plus du tout cette apparence-là !). Heureusement pour vous, dans ce cours, vous allez apprendre à réaliser un site web moderne avec HTML et CSS, comme celui-ci :

Capture d'écran du haut de la page d'accueil du site web qui va être créé au fil du cours.

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

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.

Alexia Toulmet

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.

Suivez le projet fil rouge du cours

Tout au long de ce cours, vous allez rencontrer des sections nommées "À vous de jouer !". Il s'agit de petits exercices. Vous en trouverez un par chapitre. Chapitre après chapitre, vous allez 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.

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 les outils que vous utiliserez dans ce cours

Nous voulons vous donner une véritable expérience pratique des concepts que vous aborderez dans chaque chapitre. L'idée est d'apprendre en faisant ! 

Visual Studio Code

Pour coder et réaliser les exercices du cours, vous aurez besoin :

  • d’un éditeur de code (Visual Studio Code) pour écrire les fichiers de code,

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

GitHub

Vous aurez accès à un projet GitHub pour réaliser les exercices du cours et consulter les corrigés. GitHub est la plateforme la plus utilisée pour héberger du code et collaborer dessus.

Le projet GitHub du cours utilise 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 :

Dans l'onglet Branches, on peut naviguer pour trouver les branches correspondantes aux consignes et aux solutions des différents exercices du cours.

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 !

CodePen

Enfin, vous découvrirez également un outil qui vous permettra de bidouiller du code pour voir ce que ça fait ! Il s’agit de CodePen : c’est un genre de bac à sable dans lequel vous pouvez écrire du code et voir le résultat s’afficher en direct. C’est idéal pour apprendre efficacement.

Découvrez les modalités pédagogiques du cours

  • Le cours est divisé en 4 parties de plusieurs chapitres, qu'il est préférable de suivre dans l'ordre.

  • 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 "À vous de jouer" ainsi que son corrigé, ce qui vous permettra de construire un site web, chapitre après chapitre.

  • Pour vous aider à pratiquer, à comprendre et à vous familiariser avec des structures et syntaxes de code, vous trouverez des bacs à sable de code via des liens CodePen que l'on vous donnera.

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

Un conseil : 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.

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

Vous pouvez d’ores et déjà consulter le résumé essentiel 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 !

Consultez le glossaire des balises HTML et propriétés CSS

Si vous avez besoin de revenir facilement sur un point du cours, vous pouvez télécharger et consulter :

  1. La liste des balises HTML

  2. La liste des propriétés CSS.

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