🥷 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 :

✍️ résultat : https://github.com/dupontdenis/CV.git

Le déployement se fait en un clic !

Illustration :

 résultat : https://dupontdenis.github.io/CV/

Inspection montre l'utilisation d'une grille CSS.

https://learn.microsoft.com/fr-fr/training/paths/web-development-101/?WT.mc_id=academic-51109-cxa

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.