Les trucs sympas

🚀https://dupontdenis.github.io/detection/

Les 3M de l'apprentissage !

Minétisme
Mémorisation
Maîtrise

Nous utiliserons un grand nombre de sites hors e-campus.

Les sites

Sites	liens
Notre blog	http://dupontl1.blogspot.com/
Cours	Vidéos
Cours	HTML CSS DOM
Divers	TD
Quizz	Test

Mes attentes

Autonomie

Programme

Semaine 1-3/4

Cours	HTML ? HTML éditeur HTML sémantique
TD	L'éditeur Les balises Les attributs solution
Test	Quizz

2026 !

Have fun with D+

Test / CSS + Selecteurs

On dispose de 4 blocs dans un conteneur ! Dessiner le résultat.

.conteneur {

display: grid;

grid-template-columns: repeat(4, 1cm);

grid-auto-rows: 1cm;

grid-gap: 0.1cm;

grid-auto-flow: row;

}

div:nth-child(1) {

grid-column: 1/3;

grid-row: 1/3;}

div:nth-child(2) {

grid-column: 3/5;

grid-row: 2/5;}

div:nth-child(3) {

grid-row-end: span 2;

}

div:nth-child(4) {

grid-row: 2;

}

Indiquez les lignes sélectionnées par chaque sélecteur.

<h1>Heading L.1</h1> <article> <p>First paragraph</p> <p>Second paragraph</p> </article> <article> <div>div element</div> <p>First paragraph</p> </article> <p data-cont="last">paragraph</p>	sélecteurs	ligne(s)
	p:first-child
	body > p
	article + p
	article :nth-child(3)
	[data-cont="last"]

Donnez le code CSS (grid) pour créer le drapeau français.

Le html est imposé.

</div>

CSS / revoir

Grid : https://mozilladevelopers.github.io/playground/css-grid/02-first-grid/

Grid

La technologie CSS Grid est une révolution dans la conception de sites !

Grid est intégrée progressivement par les leaders du marché.

Notion de grille

Pensez aux villes américaines, voici un plan de Manhattan dans les années 18xx.

Pour réaliser cette grille, on définit :

des zones, ce qui définit des quartiers.
puis on y affecte des élements, ce qui place les maisons !

Ne perdons pas une minute et passons à l'action en créant notre première grille.

En action

Allez dans le simulateur de grid ( simu ).

Nous allons:

définir un plan,
placez notre code HTML dans les différentes zones définies par le quadrillage.

Définir un plan

dans le conteneur du simulateur tapez

.conteneur {
display :grid;
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Ce code définit le quadrillage suivant :

Définir le placement

.conteneur {
display :grid;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}

Associer le placement

Il ne reste plus qu'à associer le code HTML à une zone en indiquant tout simplement son nom.

Par exemple : it2 sera associé à la zone nav.

#it2 {
grid-area: nav;
}

Je vous laisse compléter le code (... c'est si facile) pour obtenir une vision simplifiée de la topologie du site.

Pages