transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
La syntaxe est importante e... mais seule, elle n’est pas très efficace et on ne comprend pas trop l’intérêt d’écrire du CSS dans un f... e HTML : vos sélecteurs sont imbriqués exactement comme ils le seraient en HTML. Regardez le CSS qui en
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
Vous avez réussi ! Félicitat... êmes, et que c’est pourquoi nous avons besoin de… compiler notre code en CSS.
Il existe bien des outil... e coder en ligne en Sass, sans nous préoccuper de compiler ou non notre code ; tellement pratique !
Vo
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
===== Question 1 =====
Dan... lorsque vous utilisez ''&'', sous quelle forme se compile le symbole esperluette (&) ?
- L’esperluette (&)
- Le combinateur adjacent
- Le combinateur descendant
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
===== Initiez-vous aux varia... =====
Pour le moment, le site de Robbie Lens ne comporte pas beaucoup de couleurs, mais nous les util... devenir **dangereux**.
Pour la perte de temps je comprends, mais pourquoi dangereux ?
Imaginez : notr
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
===== Comparez CSS et Sass =====
Sass est un préprocesseur CSS. C’est un outil q... us dis, que grâce à Sass, on pourrait le réécrire comme ceci :
<code sass>
.nav {
text-align: righ
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
Vous avez créé un mixin pour... c’est bien flashy niveau couleur !
Avant même de commencer à coder, posez-vous, et analysez… Si on pro... eure façon d’intégrer cette proposition en tenant compte de votre code actuel ?
<code sass>
$dark-purp
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
Le CSS nous permet aussi de mo... ointer la souris dessus, on doit écrire notre CSS comme ceci :
<code css>
a:hover {
// Insérer ici les... ous le chapitre "Créez un lien hypertexte", c'est comme ça qu'on annonce un lien hypertexte, avec une b
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
Pour créer un formulaire, vous... vide dans l'attribut action ?
Si notre projet comportait également du code en backend(confère note ... .
<note>
En règle générale, un site internet est composé de deux parties :
* une partie frontend, c
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
===== Trouvez les répétition... éer un immense plat de spaghettis sans prendre en compte la structure et sans l’organiser proprement ? ... une codebase CSS chaotique sans vraiment réaliser comment vous en êtes arrivé là… Et c’est normal, ça f
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Changez la couleur du te... utre syntaxe, vous trouverez des outils en ligne, comme [[https://coolors.co/|Coolors]] ou encore [[https://www.w3schools.com/colors/colors_picker.asp|HTML Color Picker]].
</n
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Définissez une grid avec... nctionne. Pour ce faire, il s'agit de se demander comment représenter nos éléments. Lorsque vous créez ... plate-rows'', en indiquant la hauteur de chacune, comme on l'a fait pour ''grid-template-columns'' :
<
transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sa... roposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].
Soyons honnêtes, vous passer... n élément à modifier, ou juste pour vous rappeler comment fonctionne tel ou tel élément. D’où l’importa... le pouvoir. C’est la même chose pour notre HTML.
Comme pour les pokémons, l’idéal serait qu’en un simp
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Créez un tableau en HTML... (c'est idiot, mais encore faut-il le préciser).
Comme le nom des cellules est un peu différent pour l... l'en-tête plus lisible, elle est en gras.
<note>
Comme vous pouvez le constater, le navigateur a mis e
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Apprenez à créer un site... veut rendre sa page plus interactive, un langage comme JavaScript devient indispensable.
**JavaScript... uton ou des données entrées dans des formulaires, composition dynamique, animations…).
Voici quelques
transcriptions du cours [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html... roposé sur la plateforme [[https://openclassrooms.com|Openclassrooms]].
===== Liez le fichier CSS au ... >
h1 {
color: blue;
}
</code>
Dans un code CSS comme ci-dessus, on distingue 2 parties :
* Le sél... mine par '';''.
Le fichier CSS peut contenir des commentaires
<code css>
p {
/* J'en profite pour ajou
