A la rentrée ! Découverte du DOM !

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

🪛Merci de "moderniser" le code ! En particulier, la gestion asynchrone.

Les DS sont programmés en TD.

Présence obligatoire.

Cours 7

Vidéos

Lles placement de base https://sites.google.com/view/dupontrvisionsl2/grid

Passons aux algorithmes https://sites.google.com/view/dupontgrid/algorithmes?authuser=0

Lecture

https://dupontcss.blogspot.com/2017/03/ordre-des-blocs-places-automatiquement.html

https://dupontcss.blogspot.com/2018/09/grid-dense.html

🪛Trombinoscope

🛩️Contraintes : comportement responsive !

Plus d'infos »

Préparation au DS

🅰️ Pour toutes les questions, les blocs dans le conteneurs sont des <div>.

Bloc 1 : Bloc Rouge

Bloc 2 : Bloc Bleu

Bloc 3 : Bloc Vert

Bloc 4 : bloc Noir

🪛Dessinez les quatres blocs (R,B,V,N) dans le conteneur.

.conteneur {

display: grid;

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

grid-auto-flow: column

}

Autre test :

.conteneur {

display: grid;

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

grid-auto-rows: 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-column-end: span 2;

}

🆘 Pour vérifier votre réponse, vous pouvez utilisez un simulateur !

Couleur pleine !

Couleur hachée !

Préparation à l'examen !

🪛Trombinoscope en action

🆘 https://docs.google.com/document/d/15Is8O_6HNNoAPlI9TKoFQELYi8w8A5bBFKnbUB7e2sY/edit?usp=sharing

🚀Version avec sub-grid

🥷Cette version est hors programme : https://dupontdenis.github.io/sub-grid/

Préparation à l'examen : 🆘

🐧 Guide pour la réalisation du trombinoscope

les plus du Simu : Grid

🥷Mettre une grille comme dans l'inspecteur !

https://dupontcss.blogspot.com/2025/02/quadriller-le-body.html

Copilot : vous êtes mon seul espoir

Créez ce logo à l'aide d'une grille et de quatres blocs.

Vous pouvez (utiliser) copilot !

have FUN !

Copilot ne peut vous donner la solution : faites vous confiance !

Dans les deux articles qui suivent, notre seul espoir de faire disparaître l'étoile de la mort est d'inspecter le code à la recherche d'indice permettant de débloquer un code secret et un bouton.

La vidéo montre que le bouton est bloqué !

En cherchant, on arrive à débloquer la situation et faire disparaître l'étoile noire !

🥷Défi du WE : Sauvez la princesse Lélia !

Cliquez pour accéder à la page où le bouton permet la destruction de l'étoile. Mais le bouton semble vérouillé !

🆘Trouvez une faille dans la protection de l'étoile

🪛
Autre défi ! trouve le code secret a injecter dans le formulaire ?

5 minutes : Quizz

CSS selecteurs

Vidéos Grid

https://sites.google.com/view/dupontrvisionsl2/grid

Grid by examples

Les infos de la semaine : Damier.css

travail PersoTravail Perso pour ceux qui veulent en savoir plus !

Création d'un damier étape par étape !

Pas si facile, en effet !

Il y a deux canvas identiques décalés et superposés, voici le truc dévoilé en vidéo :

Mais comment le réaliser en CSS ?

🆘découvrir le code

DM 1 : level 🥷🥷🥷

Créer un blog sous blogger

Ajouter un article

intégrer la vidéo de https://www.cinematheque.fr/video/1469.html
intégrer la vidéo avec démarrage automatique
intégrer la vidéo avec démarrage à la 13'30

Ajouter une page

étude de iframe
Intégrer la carte disponible dans un article

🆒Préparation au DS

Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
<h1>h1</h1>
<ul id="tmpPlants" class="tmpExample">
<li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
<li class="A tmpExample" id="b">li : class =A id=b</li>
<li class="B tmpExample" id="c">li : class =B id=c</li>
</ul>
<footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple :

Selecteurs ('h1')

------------- Auto correction

div : class top

h1

li : class =A et B id=item.A
li : class =A id=b
li : class =B id=c

Encadrez la selection ('ul, li')
Encadrez la selection ('li:not(#b)')
Encadrez la selection ( "#item.A" )
Encadrez la selection ( ".A.B" )
Encadrez la selection ( ".top :first-child" )
Encadrez la selection ( "ul:first-child" )
Encadrez la selection ( "li:not(:hover)" )
Encadrez la selection ( "li.B + *" )
Encadrez la selection (".top :nth-child(2)")
Encadrez la selection (".top :nth-of-type(1)")
Encadrez la selection $(".top :not(:last-child)")

Préparation au DS : selecteurs

Indiquez les lignes selectionnées par le selecteur

🆘Exemple :

<article>
<p title="Strophe1" id="st"></p>
<header>
<h1></h1>
<h2></h2> </header>
<p class="refrain"></p>
<p title="Strophe4" id="str"></p>
<p class="refrain" id="ref4"></p>
<footer> date (1880 - 1918) </footer></article>

sélecteur

article>h1

ligne(s)

2,6,7,8

rien

🪛A compléter

<article> <p title="Strophe1" id="st"></p> <header> <h1></h1> <h2></h2> </header> <p class="refrain"></p> <p title="Strophe4" id="str"></p> <p class="refrain" id="ref4"></p> <footer> date (1880 - 1918) </footer></article>	sélecteur	ligne(s)
	p ~ p ~ p
	p:nth-child(2)
	article :last-child:not(p)
	[class $="n"]
	article :nth-of-type(-n+1)