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 :
Partagez vos conseils pour améliorer ce cours
Avant d'aller plus loin, nous avons un petite information à vous partager : nous souhaitons que ce cours soit le plus interactif possible ! Vous aurez sûrement des réactions en le lisant, des questions, des astuces à partager.
Rencontrez vos professeurs
Pour vous guider dans ce cours, 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 :
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ésumé 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 :
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 !
