🪛Trouvez une idée (un algorithme) permettant de mettre les dupond à gauche et les dupont à droite !
Projet CV
💀Deadline
The project must be delivered on time !
The project must be delivered on time !
👏🏼 Bravo à tous ceux qui ont pu mettre leur projet sur GitHub.
🔙Vous n'aurez pas de ma part un retour individuel !
Cependant, évitez de faire comme certains : j’ai reçu toutes les deux minutes une nouvelle version.
Certes, il existe une fonction de suppression des doublons, mais évitez cela à tout prix (vous pouvez à tout moment modifier le contenu de votre CV sans changer l’URL).
Je peux noter que certains étudiants n’ont pas suivi la formation Microsoft ni respecté le code du CV à cloner. Ainsi, nous retrouvons du code CSS non vu en cours. Voici par exemple un cas où la technologie flex est utilisée.
D’autres utilisent des technologies obsolètes, comme
position: absolute, pour simuler des colonnes
Vous pourriez egalement donner des nom de classe plus explicite sur le contenu !
Attention : vous avez mis un numéro de téléphone. Soyez conscients que ce numéro est en ligne et visible de tous !
🥉Les bons points !
Certaines étudiantes et certains étudiants ont utilisé des media queries. Ce n’est pas une obligation, mais c’est un vrai plus.
Pour ceux qui ont mis des niveaux de compétences, voici une version avec des étoiles !
See the Pen like by SuperDupont (@SuperDupont) on CodePen.
Grid : auto-flow-columns
Rappel sur le sens du remplissage d'une grille
🪛Code en action
Dans le simulateur : https://dupontdenis.github.io/TestSelecteurDemo/
remplacez le code par les codes suivants !
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li><a href="#">Sub Category</a></li>
<li><a href="#">Type</a></li>
</ul>
ul {
display: grid;
grid-auto-flow: column;
justify-content: start;
list-style: none;
}
li:not(:last-child)::after {
content: "→";
}
a {
color: white;
}
Révisions : Grid placement
Pour chaque modification de valeurs de grille, je vous conseille de relancer l'algorithme de placemment.
Explication : lien
🛟Explication : https://developer.mozilla.org/fr/docs/Web/CSS/Guides/Grid_layout/Auto-placement
Simplifiez votre grille ! ⚖️
Pourquoi faire compliqué lorsque l'on peut faire simple !
Comparez les codes HTML/CSS
See the Pen Grid by Example 13: Redefining grid areas with media queries by Rachel Andrew (@rachelandrew) on CodePen.
Analysez les codes HTML et en particulier celui de la grille !See the Pen Grid by Example 13: Redefining grid areas with media queries by SuperDupont (@SuperDupont) on CodePen.
Travaux des L1
Voici un projet réalisé par un.e L1 DD
https://melinakhettab.github.io/DM-Dupons/
https://salwaaaitali.github.io/vpro/
one more : https://dupontdenis.github.io/iframe/
Autre projet avec Grid !
https://clement-soulier.github.io/DM-calculator/
Analysez les codes CSS
La superposition d’éléments avec CSS Grid est une technique moderne, puissante et élégante pour créer des interfaces riches et responsives. Elle permet de placer plusieurs éléments dans la même cellule de grille, de contrôler précisément leur ordre d’empilement avec
z-index/order et de gérer facilement l’alignement grâce à place-items et place-self. 🥷🏿Cette approche surpasse le positionnement absolu en termes de maintenabilité, d’accessibilité et de performance, tout en restant compatible avec les exigences du web moderne.
code → Absolute/Stacking
IA : smart une catastrophe
Je viens de batailler avec l'IA
... je vous passe les détails des réponses délirantes de l'IA
🥷🏽🥷🏽🥷🏿Challenge
Objectif : Trier les étudiants par Filieres ?
Analyse : C'est bien la premiere fois que j'entends que l'on pourrait trier des éléments avec une grille !
Code de base :
 |
| voir promo |
Résultat attendu :
Révisions : Les algorithmes de placement : 🎉
DS
Ordre des blocs placés automatiquement : grid;
Utilisons le simulateur et appliquons le style suivant :
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Voici un Autre cas
.conteneur { display : grid; grid-template-columns: repeat(2,100px); grid-auto-rows: 100px; } | #it1 { grid-column: 2; grid-row: 1; } |
🛟Nous allons tenter de comprendre l'algorithme utilisé pour placer les blocs.
Tout d'abord, les blocs "fixes" sont placés.
Définition : On appelle bloc fixe, un bloc qui à son emplacement défini en ligne et en colonne.
Dans notre exemple, le bloc rouge est un bloc fixe. En effet, sa colonne et ligne sont définies.
Une fois que les blocs fixes sont placés, les autres éléments sont placés automatiquement dans l'ordre du DOM (défini dans le HTML).
Dans notre exemple :
Les blocs bleu, vert et gris sont placés dans cet ordre.
Remarque : le bloc bleu défini après le bloc rouge se retrouve placé avant lui.
Pour les blocs "fixes", il peut y avoir intersection des zones. Les blocs se recouvrent dans l'ordre de leur position dans le DOM, voir Intersection.
Cas des blocs définis sur la dimension définie par le flow.
Examinons ce cas
#it1 {
grid-row : 2;
grid-column : 2/3;
}
#it2 {
grid-column : span 2;
}
#it3 {
grid-row : 1;
}
🥇Priorité des blocs :
- Le bloc 1 est traité en priorité (bloc fixe).
- Pour grid-auto-flow: row; nous recherchons des blocs qui ont l'attribut grid-row déclaré. Le bloc 3 est traité
- Les blocs restants sont traités par ordre du flux.
autre exemple
Cas des blocs définis uniquement sur une dimension.
Voici un Autre cas
exemple avec grid-column-end.conteneur { display : grid; grid-template-columns: repeat(2, 100px); grid-auto-rows: 100px; grid-gap: 10px; } | #it1 { grid-column: 2; grid-row: 1 / 2; } #it2 { grid-column-end: span 2; } |
Comme précédemment le bloc rouge est placé en priorité, ensuite le bloc bleu cherche une place où il peut se placer sans "toucher" les blocs fixes. Exemple
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
Les blocs vert et gris seront placés à la suite avec les mêmes conditions en respectant entre eux les précédences du DOM. Ils ne peuvent "dépasser" le bloc bleu.
→ 🪛 exemple
⇉ 🪛exemple
🎚️Denses
Des algorithmes puissants au service du placement des blocs
.wrapper {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-auto-rows: 100px;
grid-gap: 10px;
grid-auto-flow: row;
}
}
Sans détailler les algorithmes, en voici le principe.
1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.
2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.
Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.
Algorithme par l'exemple
Sans détailler les algorithmes, en voici le principe.
1) On place les objets qui ont une position. Sont concernés ceux qui ont une valeur pour grid-column et grid-row.
Dans l'exemple, les blocs 1 et 2 sont concernés.
2) On place les autres objets restant ( ici 3 et 4) en tenant compte de leur taille.
Dans notre exemple, la première *case* qui permet d’accueillir le bloc 3 est à la ligne 3, colonne 1.
Pour le bloc 4, qui doit être placé après le bloc trois (on conserve l'ordre du DOM), la première *case* correspond à la ligne 5, colonne 1.
Algorithme automatique avancé
Résumé sur le placement :
Le flux est en ligne, un element qui a sa colonne fixée bloque le flux !
🥷Notez
🥷Le flux est en colonne, on ne peut passer devant un element qui a sa ligne fixée.
notez
Inscription à :
Commentaires (Atom)