Découvrir HTML/CSS
-
Qu'est-ce qu'un Meme internet ?
-
Brainstorm
-
Introduction au HTML
- Introduction au CSS
Au programme
-
Thimble
-
Explorer un code pré-écrit
-
Les mains dans le code !
- Réflexion / Quizz ! :-)
Qu'est-ce qu'un Meme ?
Créé ton propre Meme en HTML/CSS !
TEMPÊTE DE CERVEAUX
Qu'est-ce que le HTML ?
HTML
Hypertext Markup Language
<balise ouvrante> Texte </balise fermante><h1> Titre niveau 1 </h1>
<h2> Titre niveau 2 </h2>
<p> paragraphe </p>
<a href="www.lien.com"> Texte sur lequel on doit cliquer </a>Qu'est-ce que le CSS ?
CSS
Cascading Style Sheet
body{
background-color : darkblue;
}
h1{
color : red;
}Les mains dans le code !
Allez sur le site :
et regardons ensemble comment ça marche :)
voir ce que veut dire une balise : Alt + k
voir la gamme chromatique : Alt + e
Raccourcis clavier :
Remix Time !
Changer le contenu de la balise <h1>
(ligne 18) par la punch line de votre choix
Challenge #1
Challenge #2
Changer la couleur du fond dans votre fichier style.css
p.s : n'hésitez pas à utiliser le color picker ;)
Challenge #3
Changer l'icône couronne par celle de votre choix
p.s : trouver des icônes gratuites sur le site Flaticon
Challenge #4
Modifiez la typo et la couleur du texte
p.s : amusez-vous à changer la taille du texte, mettre du texte en gras, etc
Challenge #5
Publiez votre Meme ! :)
Remixez un nouveau projet
... mais cette fois toutes seules ! ;)
Remixez le projet "CREATE YOUR OWN COMIC!" en mettant en scène votre première journée de formation :)
Copy of Découvrir HTML/CSS
By rodolphe
