ooms]].
Pour créer un formulaire, vous aurez besoin de la balise HTML ''<form></form>'', elle permet d'indiquer le début et la fin du formulaire.
Voici les deux attributs indispensables pour construire un formulaire fonctionnel :
ass html}}
====== Utilisez les variables et mixins ======
Notes et transcriptions du cours [[https... s://openclassrooms.com/|Openclassrooms]].
===== Initiez-vous aux variables =====
Pour le moment, le... ous les utilisons sans arrêt. Entre nous, je suis incapable de retenir les couleurs par leur **code co... espond à quel code. Alors oui, de nos jours, certains éditeurs ajoutent un aperçu de la couleur, ou al
st pas très efficace et on ne comprend pas trop l’intérêt d’écrire du CSS dans un fichier ''scss'', n’est-ce pas ? C’est ici qu’intervient le nesting !
===== Hiérarchisez grâce au nesting =====
De la même façon que vous imbriquez des balises en HT
férencier les balises de type block et de type inline =====
En HTML, la plupart des balises peuvent se ranger dans l'une ou l'autre de ces deux catégo... ment un retour à la ligne avant et après ;
* ''inline'': ce type se trouve obligatoirement à l'intérieur d'une balise ''block''.
<note>
Il existe en
e la mise en page avec Flexbox, il faut :
- Définir un conteneur ;
- Placer à l'intérieur plusieurs éléments.
Imaginez un carton dans lequel vous rangez plusieurs objets : c'est le principe !
Sur une même page web, vous pouvez avoir p
ev développement web css sass html}}
====== Définissez des priorités ======
Notes et transcription... re bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis le CSS p... revanche c’est une autre histoire : en CSS, certaines règles prennent le dessus sur d’autres, et peuvent vous donner des migraines lorsqu’un texte reste bleu alors que vous avez
://openclassrooms.com|Openclassrooms]].
===== Définissez une grid avec la propriété CSS display: grid... lorsque vous utilisez CSS Grids, vous pouvez imaginer un conteneur, une sorte de "carton" dans lequel... id. Sauf que, cette fois-ci, vous allez avoir besoin de déclarer la propriété display: grid; :
<code ... éer. Eh bien, c'est la même chose ici !
On va définir les colonnes et les rangées avec deux propriété
nt web css sass html}}
====== Améliorez vos mixins grâce aux fonctions ======
Notes et transcripti... oms.com/|Openclassrooms]].
Vous avez créé un mixin pour incorporer une bordure sur le titre du portfolio de Robbie. Sauf que, changement de programme, l... r cette ombre. Quelle serait la meilleure façon d’intégrer cette proposition en tenant compte de votre
lasse, on comprenne son usage et comment celle-ci interagit avec d’autres éléments.
On retrouve les es... tfolio. Et si je vous dis qu’il est possible de maintenir cette structure tout en l’appliquant dans vo... ces trois catégories, vous serez en mesure de définir sa fonctionnalité et ses relations. Pas mal, no... d’une page qui est **autonome et peut fonctionner indépendamment du reste de la page**. Cela peut être
été, on peut par exemple imposer à des liens (originellement de type ''inline'') d'apparaître sous forme de type ''block'':
<code css>
a {
display: block;
}
</code>
À ce... ent possible de modifier leurs dimensions! Et à l'inverse, vous pouvez tenter de faire en sorte qu'un
éussi ! Félicitations ! 🎉 YOU DID IT ! Vous avez fini ce cours.
Avant de vous laisser partir et voler... izons, il nous reste quelques notions à aborder afin que vous puissiez être en totale autonomie.
====... s en ligne =====
Si vous vous souvenez bien, en fin de la partie 1, je vous expliquais que les navigateurs ne peuvent interpréter Sass par eux-mêmes, et que c’est pourquo
e css>
.nav {
text-align: right;
}
.nav .nav__link {
font-size: 15px;
padding-left: 30px;
}
.nav .nav__link .nav__link--purple {
color: #a5b4fc;
}
</code>
Et si je vous dis, que grâce à Sass, on pourrait l
=====
Les **media queries** sont des règles qui indiquent quand on doit appliquer des propriétés CSS... sur un smartphone, une tablette ou un écran d'ordinateur.
En fait, les maquettes pour les différente... es blocs les uns au-dessous des autres. Sur un ordinateur, le contenu peut se réarranger différemment.... css>
@media screen and (max-width: 1200px) {
/* Insérez vos propriétés CSS ici, avec vos sélecteurs*
{{tag>dev web html css}}
====== Intégrez le CSS dans la page HTML ======
Notes et transcriptions du ... HTML =====
Les éléments de mise en forme sont définis dans le fichier CSS ou feuille de style (styles... ''.css'' et ''.html'', on utilise la balise orpheline <link> dans le fichier ''.html'' : le document HTML utilise la ou les feuilles de styles.
La balise
dre plus spécifiques ;
- refactoriser le code afin d’éviter les répétitions ;
- réorganiser votre ... emiè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 intention, c’est une bonne idée dans un premier temps. Cependant, cela ne fait pas partie du principe du DRY et ne vous évitera pas les répétitions
