Pages

🥷 Test

HTML

CSS

<h1>Inspecter le style</h1>

<p>Pourquoi le style est baré ?</p>




p {

  background-color: blue;

}


h1 + p {

  background-color: gold;

}


p:last-child {

 background-color: black;

}


h1 ~ p {

  background-color: red;


❓Quel sera la couleur du paragraphe ?


🪛Utilsez le simulateur

https://dupontdenis.github.io/TestSelecteurDemo/


🛟Explications

See the Pen level CSS by SuperDupont (@SuperDupont) on CodePen.

Inspection



L'inspection donne le résultat des règles de priorité :


Amusez-vous à cocher et décocher les règles




Projet à rendre : Mon CV

Le projet → Microsoft CV

Date limite 01/03/2026

 

SOS lien : CV en ligne

Workshop Microsoft ©️

  Nous avons mis en place un workshop pour illustrer la mise en ligne de votre CV

Exemple

https://dupontdenis.github.io/CV/

Suivez le guide

Create a resume website in the Browser using HTML, CSS, github.dev, and GitHub Pages

👉 https://github.com/ornelladotcom/resume-website-workshop 👈


⇉ 

Le passage de VStudio à GitHub se fait en un clic !

Illustration :

Le déployement se fait en un clic !

Illustration :



Inspection montre l'utilisation d'une grille CSS.




TD Grid : grille dans grille

 Définir une grille : Rappels

See the Pen CSS Grid Layout - Basic Layout by SuperDupont (@SuperDupont) on CodePen.


 🪛TD : → lien 🪛


🎉En action : → lien


Une grille





Des grilles dans une grille





🥷 Projet entreprise

 

 Z-index : La troisième dimension !

🪛Exemple-interactif 

Avec Edge, on a une vue 3D ! 

Analyser et corriger le code

https://dupontdenis.github.io/cssPostion-useCase/


Analyse : la photo devrait être mise en avant.

Last quizz !


How to

Help : grid !


 

🪛 En action



See the Pen Grid-revision def grid by dupont (@dupontcodepen) on CodePen.