html css}}
====== Créez des formulaires ======
Notes et transcriptions du cours [[https://openclassro... t comportait également du code en backend(confère note ci-dessous), c'est là qu'on indiquerait une URL q... d'inspecter ce qu'on obtient, assez simplement.
<note>
En règle générale, un site internet est composé ... des informations dans une base de données, etc.
</note>
Voyons maintenant quelle balise HTML utiliser p
==== Adaptez votre code sur tous supports ======
Notes et transcriptions du cours [[https://openclassro... ===== Révisez les principes du responsive =====
<note>
Les media queries sont des règles qui indiquent ... ries|Créez votre site web avec HTML5 et CSS3]].
</note>
Les media queries indiquent au navigateur d’**... edia queries sont appelées des **breakpoints**.
<note>
Les breakpoints représentent les **limites** lié
}}
====== Découvrez le modèle des boîtes ======
Notes et transcriptions du cours [[https://openclassro... oirement à l'intérieur d'une balise ''block''.
<note>
Il existe en fait plusieurs autres catégories tr... r le moment, car ces balises sont minoritaires.
</note>
Pour bien visualiser le concept, voici un petit... La balise ''<div>''(qui est de type **block**).
<note>
N’abusez pas des balises universelles, même si e
}}
====== Optimisez la lecture du code ======
Notes et transcriptions du cours [[https://openclassro... t bien un code plus lisible et compréhensible !
<note>
Si vous souhaitez vous entraîner et comparer ce ... t d’observer en temps réel le code CSS compilé.
</note>
===== Incorporez les sélecteurs au nesting ====... v .petite-fille-div {
color: #D6FFF5;
}
</code>
<note>
Au lieu de répliquer exactement la structure du
====== Utilisez les variables et mixins ======
Notes et transcriptions du cours [[https://openclassro... correspondante :
{{comparaison_css_sass.png}}
<note>
Ne soyez pas trop spécifique lorsque vous nommez... ain-color''** (couleur principale, en anglais).
</note>
Le nom de la variable vous indique que son rôle... !
===== Créez des ombres avec une mixin =====
<note>
En programmation objet, on dit un **ensemble de
====== Créez des apparences dynamiques ======
Notes et transcriptions du cours [[https://openclassro... ée ; et tout cela grâce aux **pseudo-classes**.
<note>
Les [[https://developer.mozilla.org/fr/docs/Web/... oment un style en particulier doit s'appliquer.
</note>
===== Stylisez un élément au survol de la souri... sur le lien, la couleur de fond du lien change.
<note>
Vous remarquerez d'ailleurs que le navigateur ap
Améliorez vos mixins grâce aux fonctions ======
Notes et transcriptions du cours [[https://openclassro... e boîte à outils mais une grande, la totale ! 🛠
<note>
Si vous y jetez un œil, vous découvrirez qu’il y... ules/color|uniquement dédiés aux couleurs]] ! 🎉
</note>
On appelle ces outils des **fonctions**.
En pr... entation/modules/color#darken|documentation]] !
<note>
La documentation, c’est le mode d’emploi, un peu
ss}}
====== Changez l'apparence du texte ======
Notes et transcriptions du cours [[https://openclassro... ;
* Impact ;
* Trebuchet MS ;
* Verdana.
<note>
Le ''sérif'' désigne l’empattement situé à l’ext... d’accessibilité, car c’est plus facile à lire.
</note>
{{texte_serif_vs_sans_serif.jpg|différences car... CSS pour associer cette police à vos balises.
<note>
Ici, on s'est contenté de suivre les étapes préc
====== Ajoutez de la couleur et un fond ======
Notes et transcriptions du cours [[https://openclassro... lais). Exemple : ''%%color: rgb(250,25,118);%%''. Notez qu'on peut ajouter la notion d'opacité (ou de tr... pacité : ''%%color: rgba(250,25,118, 0.5);%%''
<note>
Si vous voulez trouver une couleur, ou bien conv... m/colors/colors_picker.asp|HTML Color Picker]].
</note>
===== Appliquez une couleur d'arrière-plan avec
html css}}
====== Structurez votre page ======
Notes et transcriptions du cours [[https://openclassro... n, un lien de connexion à son espace personnel.
<note>
Attention, la balise ''<header>'' n'a rien à vo... rs des polices, vers une feuille de style, etc.
</note>
Il peut y avoir plusieurs en-têtes dans votre p... complémentaires à l'article que l'on visualise.
<note>
La balise ''<article>'' sert à englober une port
== Faites votre mise en page avec Flexbox ======
Notes et transcriptions du cours [[https://openclassro... ement d'un carton (euh pardon, d'un conteneur).
<note>
Un conteneur (container en anglais) est une bali... élèbres sont les balises %%<div> et <span>%%.
</note>
<code html>
<div class="container">
<div class=... les-ci seront réparties avec ''align-content''.
<note>
Cette propriété n'a aucun effet s'il n'y a qu'un
====== Découvrez les bases de CSS Grids ======
Notes et transcriptions du cours [[https://openclassro... riétés liées à ''grid-column'' et ''grid-row''.
<note>
C'est surtout dans ce genre de cas qu'on voit qu... lors qu'ici, on peut le faire assez simplement.
</note>
À chaque fois que vous écrivez ''display: grid'... e css>
.une {
grid-column: 1 / 4;
}
</code>
<note>
Attendez, mais pourquoi on dit d'aller jusqu'à
ordez d'autres techniques de mise en page ======
Notes et transcriptions du cours [[https://openclassro... type ''block'' par défaut devienne ''inline''.
<note>
Si vous ne vous souvenez plus de la différence e... le_des_boites|Découvrez le modèle des boîtes]].
</note>
===== Cachez vos éléments avec display: none; ... se positionner en haut à gauche de l'élément 2.
<note>
La propriété [[https://developer.mozilla.org/fr/
html}}
====== Définissez des priorités ======
Notes et transcriptions du cours [[https://openclassro... v style="background-color: red;"></div>
</code>
<note warning>
On vous déconseille très fortement ce st... t reste LA règle de base pour un code organisé.
</note>
==== 2 - Les id ====
Les ''id'' sont uniques. ... ent, par définition, être utilisés qu’une fois.
<note>
Il est toujours judicieux de revoir les bases po
==== Passez au niveau supérieur avec Sass ======
Notes et transcriptions du cours [[https://openclassro... nctuation vous permet aussi d’écrire plus vite.
<note>
Entre nous, il est assez rare que vous tombiez s... lerons, il s’agira de .scss et de sa syntaxe.
</note>
===== Découvrez les fonctionnalités de Sass ==... white;
text-shadow: 10px 10px red;
}
</code>
<note>
Il existe de nombreuses fonctionnalités Sass à d
