===== 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:
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
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... chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons... "orange-round">Bouton</button>
</div>
</body>
</code>
Avec ce code HTML, on comprend que cette page c
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;
}
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
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.
* ... ss, sans nous préoccuper de compiler ou non notre code ; tellement pratique !
Vous pouvez créer des col
out bien structuré ?
* Comment s’assurer que le code est maintenable ?
* Comment coder plus vite et ... 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 important, et cela vous fera gagner du temps par la su
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
