Maîtrisez tous les types d'inputs HTML avec des exemples pratiques ! 🎯
Structure HTML5 minimale avec balises sémantiques
Vérifiez votre compréhension des balises et notions utilisées dans le TP 0 ! 📚
Formulaire simple avec fieldset et 2 champs obligatoires
Paragraphes et éléments de contenu riche (gras, lien, listes)
Formulaire avec radio buttons groupées
Select et checkboxes groupées
Upload fichier et sélection multiple
Formulaire avec date, age (minimum 18, maximum 50), site web - tous les champs obligatoires
Image, lien, textarea et range input
Formulaire avec téléphone (+212 désactivé, 8 chiffres), nom (lettres uniquement, 3-30 caractères), mot de passe (minimum 8 caractères)
Testez vos connaissances sur les balises et attributs HTML ! 📚
Écrivez le CSS pour styliser le tableau ci-dessous ! 🎨
On suppose qu'on a un tableau, applique les styles suivants :
💡 Réfléchissez aux propriétés CSS à utiliser pour chaque instruction. Vous devez trouver les noms des propriétés CSS vous-même !
Testez vos connaissances sur les propriétés de texte CSS ! 📚
Testez vos connaissances sur les propriétés du Box Model ! 📚
Créez un design de formulaire de login en utilisant les propriétés du Box Model ! 🎨
💡 Le CSS s'applique en temps réel dans l'iframe (isolé)
On suppose qu'on a un formulaire, applique les styles suivants :
:hover
:valid
:invalid
Testez vos connaissances sur les sélecteurs CSS ! 📚
Énoncé : Donnez le sélecteur CSS exact qui permet de cibler les éléments demandés (comme .test, #test, div > p, etc.).
<div id="contenu">
<h2 class="titre">Titre principal</h2>
<p class="texte">Paragraphe 1</p>
<section class="bloc">
<h3 class="sous-titre">Bloc</h3>
<p class="texte important">Paragraphe 2</p>
</section>
<p id="note">Paragraphe 3</p>
<p class="fin">Paragraphe 4</p>
</div>Paragraphe 1
Paragraphe 2
Paragraphe 3
Paragraphe 4
Écris uniquement le sélecteur.
Testez vos connaissances sur les pseudo-classes CSS ! 📚
:hover avec border ou border-color (couleur au choix)
<img src="https://picsum.photos/100" id="img">
<input type="text" placeholder="Votre nom">
<input type="text" disabled value="Désactivé">
<input type="checkbox"> Option 1
<input type="checkbox" checked> Option 2
<a href="#">Lien vers une page</a>
<input type="email" required placeholder="email@example.com">
<input type="email" required placeholder="email-invalide">💡 Le CSS s'applique en temps réel dans l'iframe (isolé)
29,99€
19,99€
39,99€
Testez vos connaissances sur Flexbox ! 📚
<h1 id="titre1">PRODUITS LES PLUS VENDUS</h1>
<div class="row">
<div class="card">
<p>Clavier</p>
<p>120 DH</p>
<button>Achat</button>
<a href="#">Détails</a>
</div>
<div class="card">
<p>Souris</p>
<p>80 DH</p>
<button>Achat</button>
<a href="#">Détails</a>
</div>
<div class="card">
<p>Écran</p>
<p>1500 DH</p>
<button>Achat</button>
<a href="#">Détails</a>
</div>
</div>💡 Le CSS s'applique en temps réel dans l'iframe (isolé)
Attendu: menu horizontal avec fond gris foncé, texte blanc, 5 éléments répartis équitablement, taille fixe 800px puis flexible 100%.
<ul> avec 5 <li> (Accueil, Produits, Services, Equipe, Contact)list-style: none;display: flex; sur <ul>background: #4a5568; ou similairecolor: white; sur les lienswidth: 800px; sur .menutext-decoration: none;flex: 1; sur chaque <li>width: 800px; par width: 100%;<nav class="menu">
<ul>
<li>
<a href="#">Accueil</a>
</li>
<li>
<a href="#">Produits</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Equipe</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
Transform permet de déplacer, pivoter, agrandir/réduire ou incliner un élément sans casser le flux. Combiné à transition, on obtient des effets fluides.
transform: rotate(15deg) scale(0.95);transform: rotate(0deg) scale(1.1);transition: transform 0.3s ease;1) Édite le CSS. 2) Clique Appliquer. 3) Compare avec la solution attendue.
animation: pulse 1s infinite;
@keyframes définit des animations réutilisables. Tu spécifies les étapes (0%, 50%, 100%) et les transitions sont appliquées via animation.
animation: pulse 1s infinite;1) Édite le CSS (LIVE). 2) Compare avec la solution attendue.
transition: all 0.3s ease;transition crée une animation fluide entre deux états d'un élément lors d'un changement CSS (ex: au survol). C'est plus simple que @keyframes pour les petits effets.
transition: all 0.3s ease;1) Édite le CSS. 2) Clique Appliquer. 3) Survole et compare avec la solution.
☝️ Survolez la boîte avec la souris
Parcourez les présentations PDF pour approfondir vos connaissances CSS
Testez vos connaissances ! Répondez aux questions et obtenez votre score 📊
💡 Utilisez les boutons "Suivant" et "Précédent" pour naviguer entre les questions
<head> :<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
Avant </body> :<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Chaque row peut contenir jusqu'à 12 colonnes.
Tu peux diviser en : 12 × col-1, 6 × col-2, 4 × col-3, 3 × col-4, 2 × col-6, ou 1 × col-12.
Exemple : col-4 + col-4 + col-4 = 12 colonnes ✅
Bootstrap est un framework (bibliothèque) CSS/JS qui fournit une grille responsive, des composants prêts à l'emploi (boutons, cartes, navbars…) et des classes utilitaires (marges, couleurs…) pour créer une UI rapidement et de manière cohérente.
container
row
col
col-6
col-sm-4
col-md-4
m-3
mt-3
mb-2
p-3
px-3
py-2
text-primary
text-success
bg-primary
bg-light
bg-dark
border
rounded
shadow
btn
btn-primary
card
col-sm-12 (ils passent en 1 colonne sur mobile)col-md-6, C = col-md-6 (largeur égale)col-sm-6 + col-md-3bg-*col-12, 2× col-sm-12 col-md-6, 4× col-sm-6 col-md-3bg-*
container Bootstrap pour centrer le contenu.row) divisée en 3 colonnes (col).img-fluid, rounded).text-center).border).btn) avec des couleurs différentes (btn-primary, btn-success, btn-danger).container → row → 3× col text-centerimg-fluid rounded + texte court + borderbtn btn-primary, btn btn-success, btn btn-danger