===== Question 2 =====
En vous basant sur le code HTML suivant,
<code html>
<section>
<h1>Titre</h1>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
</section>
</code>
Quel combinateur applique la couleur bleue aux éléments de notre liste ?
- <code css>
section + li {
color: blue;
}
</code>
css sass html}}
====== Optimisez la lecture du code ======
Notes et transcriptions du cours [[https:... syntaxe est importante et nous permet d’écrire du code plus organisé, certes ; mais seule, elle n’est pa... es sélecteurs, ou autrement dit, les "nester" :
<code sass>
.nav {
text-align: right;
.nav__lin... urple {
color: #a5b4fc;
}
}
}
</code>
Vous obtenez une hiérarchie de sélecteurs clair
b css sass html}}
====== Quiz : Structurer son code ======
Notes et transcriptions du cours [[https:... les rendre plus spécifiques ;
- refactoriser le code afin d’éviter les répétitions ;
- réorganiser v... te : le principe du DRY est de refactoriser votre code, d’éviter les répétitions.
++++
===== Question ... ropriétés de votre premier bouton ci-dessous :
<code css>
.btn {
background-color: #001534;
color:
du CSS, avec une syntaxe différente.
Prenons ce code CSS :
<code css>
.nav {
text-align: right;
}
.nav .nav__link {
font-size: 15px;
padding-left: 3... __link .nav__link--purple {
color: #a5b4fc;
}
</code>
Et si je vous dis, que grâce à Sass, on pourrait le réécrire comme ceci :
<code sass>
.nav {
text-align: right;
.nav__lin
nt web css sass html}}
====== Simplifiez votre code ======
Notes et transcriptions du cours [[https:... u importe le langage que vous utilisez, écrire du code, rajouter des lignes, créer un immense plat de sp... vigilant dès le début, vous allez finir avec une codebase CSS chaotique sans vraiment réaliser comment ... chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons
u HTML, c’est ce qu’on appelle du style inline.
<code html>
<div style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très forteme... breux problèmes et reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id... liser plusieurs fois un ''id'' dans votre HTML.
<code html>
<div id="box"></div>
</code>
<code css>
#b
suis incapable de retenir les couleurs par leur **code couleur hexadécimal**, ni de savoir quelle couleur correspond à quel code. Alors oui, de nos jours, certains éditeurs ajout... la couleur, ou alors je pourrais copier-coller le code sur Google. Oui. Mais c’est une sacrée perte de t... ntroduction de notre site, que remarquez-vous ?
<code css>
.navbar__link--purple {
color: #a5b4fc;
}
ment web css sass html}}
====== Déployez votre code Sass en ligne ======
Notes et transcriptions du ... est pourquoi nous avons besoin de… compiler notre code en CSS.
Il existe bien des outils et plateformes en ligne pour pouvoir pratiquer votre code Sass sans l’installer sur votre ordinateur.
* [[https://codepen.io/|CodePen]]
Nous avons utilisé CodePen tout
onnêtes, vous passerez plus de temps à lire votre code qu’à l’écrire. Que ce soit parcourir votre code à la recherche d’un élément à modifier, ou juste pour v... ment les règles qui sont spécifiques à ce bloc.
<code html>
<nav class="navbar">
<!-- Notre barre de navigation -->
</nav>
</code>
<code css>
.navbar {
display: flex;
flex-di
lashy niveau couleur !
Avant même de commencer à coder, posez-vous, et analysez… Si on procède étape pa... égrer cette proposition en tenant compte de votre code actuel ?
<code sass>
$dark-purple: #1d0221;
$title-color: #a5b4fc;
@mixin title-shadow {
text-shadow: .50rem .50rem $dark-purple;
}
</code>
Vous avez :
* deux variables ''$title-color'
out bien structuré ?
* Comment s’assurer que le code est maintenable ?
* Comment coder plus vite et de manière plus efficace ?
Ce cours se décompose en d... ec la première vous apprendrez à structurer votre code. Nous allons commencer avec votre HTML : simplifi... otre CSS ! Anticiper la façon de structurer votre code avant d’écrire la moindre ligne de code est très
ement web css sass html}}
====== Adaptez votre code sur tous supports ======
Notes et transcriptions... d’accolades contenant les ensembles de règles :
<code sass>
@media (max-width: 599px) {
Votre code ici !
}
</code>
Cette **media query** signifie que le navigateur appliquera votre code si la largeur d
