Chapitre 1 | Présentation de CodePen – CDUI <code is my friend>

Présentation de CodePen

Qu’est-ce que CodePen ?

CodePen est une plateforme en ligne où vous pouvez écrire et tester vos codes HTML, CSS et JavaScript directement dans votre navigateur. Cela vous permet d’expérimenter rapidement sans avoir besoin d’installer des logiciels sur votre ordinateur.

Bienvenue dans ce cours d’initiation au HTML et CSS. Dans cette section, vous allez découvrir CodePen, un outil en ligne qui permet de tester et partager facilement du code web.

Cliquer sur le bouton HTML pour afficher HTML & Résultat :

Cliquer sur le bouton CSS pour afficher CSS & Résultat :

A tout moment cliquez sur Result pour revenir au résultat uniquement.

Accéder à CodePen

Comment afficher le code sur codepen avec 4 écrans de visualisation (html, css, js, result) et obtenir ceci ?

Cliquez simplement sur EDIT ON CODEPEN ( à droite de la barre de menu)

Comment utiliser CodePen ?

Accédez à CodePen.
Créer un compte
Accédez à votre premier PEN

Vous pouvez renommer votre PEN

Vous pouvez sauvegarder votre PEN

Vous pouvez afficher vos PEN (Your Work)

Exercice

Voici l’attendu de l’exercice. Les consignes sont en dessous de l’attendu.

Pour réaliser l’attendu, avec CodePen, créer un Pen, renommer le myFirstPen.

Copier le code HTML ci dessous dans la partie HTML de votre pen, et faites de même pour le CSS. Le code doit s’afficher avec sa mise en forme dans la fenêtre de résultat (result).

https://codepen.io/pen/

HTML

<div class="element01"></div>
<div class="element02"></div>
<div class="element03"></div>
<div class="element04"></div>

CSS

div {width:100px;height:100px;}

.element01 {background-color:red;}
.element02 {background-color:green;}
.element03 {background-color:yellow;}
.element04 {background-color:blue;}


div {display:inline-block;}

Note pour plus tard

Veuillez mémoriser la consigne suivante.

En copiant du HTML dans CodePen, si vous apercevez ce message [point d’interrogation rouge cliquable qui mènera vers gaut de votre code.

En effet : ajouter <!DOCTYPE html> manuellement pourrait entraîner des erreurs, car la plateforme considère déjà que cette déclaration est incluse. Cette approche vise à simplifier l’expérience, notamment pour tester rapidement des idées ou expérimenter du code.

Sur CodePen veuillez enlever la balise <!DOCTYPE html> après vos copier coller.