sass html}}
====== Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cou... une bordure sur le titre du portfolio de Robbie. Sauf que, changement de programme, la couleur de l’om... bre ne plaît plus du tout. On vous envoie un nouveau visuel :
{{maquette_modification_titre.png}}
La... e dans le brief !
Wow. Là c’est bien flashy niveau couleur !
Avant même de commencer à coder, posez
e reste simple, pour le CSS en revanche c’est une autre histoire : en CSS, certaines règles prennent le dessus sur d’autres, et peuvent vous donner des migraines lorsqu’... par exemple, qui indique que l’on passe la souris au-dessus du sélecteur. Les attributs permettent de ... s différents, mais peuvent quand même s’appliquer au même élément.
La spécificité permet donc d’**att
ntervient le nesting !
===== Hiérarchisez grâce au nesting =====
De la même façon que vous imbrique... ans Sass vous pouvez imbriquer les sélecteurs, ou autrement dit, les "nester" :
<code sass>
.nav {
... compilé.
</note>
===== Incorporez les sélecteurs au nesting =====
Il n’y a pas réellement de limite ... rofondeur du nesting qu’on peut opérer dans Sass. Au début de mon apprentissage, j’ai plusieurs fois t
d’une page qui a été supprimée en HTML et dont on aurait oublié de supprimer le CSS ?
Tout peut arriv... parle potentiellement d’un canard, et d’un artichaut : le nom en évoque l’apparence ou le pouvoir. C’... kémons, l’idéal serait qu’en un simple coup d'œil au nom d’une classe, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
On retrouve les essentiels de la pa
===
La méthode DRY est un des concepts fondamentaux lorsqu’on souhaite simplifier notre CSS ; cette ... tre réutilisés. Les deux premières réponses sont fausses car contraires au principe du DRY : éviter les répétitions.
La dernière réponse part d’une bonne... == Question 2 =====
Vous voulez créer deux nouveaux boutons :
* un dont les bords seront ronds ;
code>
Quel combinateur applique la couleur bleue aux éléments de notre liste ?
- <code css>
sectio... >
++++ Réponse|
Choix 3. La réponse 1 correspond au combinateur adjacent : la couleur sera appliquée ... ’est pas section mais bien ul. Cette réponse est fausse. Si vous vouliez utiliser le combinateur parent > enfant, il aurait fallu avoir ul > li.
La réponse 3 est un com
rrière votre écran, je vous vois. 👀
Je l’ai fait aussi et pendant longtemps. Rassurez-vous : personne... ui se met en place à mesure que l’on fait de nouveaux changements. Et, à moins d’être prévoyant et vig... lus parlant que 10 000 mots ! Partons à la chasse aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons</h2>
rooms.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le site de Robbie Lens ne comporte pas beaucoup de couleurs, mais nous les utilisons sans arr... ois** et la **référencer** à chaque fois qu’on en aurait besoin, ce serait vraiment pratique. Eh bien,... r et le tour est joué ! (De plus, le reste du bureau ne pourra pas faire semblant, votre nom est sur c
garde notre page sur un navigateur d’ordinateur. Sauf que sur mobile…
{{affichage_sur_mobile01.png}}
... et CSS3]].
</note>
Les media queries indiquent au navigateur d’**utiliser un ensemble de règles** s... ra les ensembles de règles spécifiquement adaptés aux écrans plus petits, comme une tablette, voire un... uery. Dès que la résolution de l’écran correspond au breakpoint, alors le breakpoint prendra le pas su
éveloppement web css sass html}}
====== Passez au niveau supérieur avec Sass ======
Notes et transcriptions du cours [[https://openclassrooms.com/fr/c... bles d’utiliser Sass en l’état. Pour ça, il vous faut un bon vieux fichier CSS classique... La solutio... color: #a5b4fc;
</code>
Le SCSS ressemble beaucoup à du CSS normal, tandis que le ''.sass'' a un
rs.
Avant de vous laisser partir et voler vers d’autres horizons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie.
===== Utilisez Sass en ligne =====
Si v... code mis à disposition (par nous 😉) par la communauté.
* [[https://www.sassmeister.com/|SassMeiste... ur Sass. Vous pouvez lier votre compte GitHub et sauvegarder tous les bouts de code pour ne pas les pe
, vos projets grossissent, tout s’entasse et un beau jour on regrette amèrement de ne pas avoir pris l... isation et la structure des fichiers HTML/CSS. On aurait gagné du temps aussi bien dans la rédaction que dans la mise en œuvre ou la maintenance.
Le cours propose de répondre aux trois problématiques suivantes :
* Comment éc
