Devoir : Préparation Examen
Développement Web – CSS
Licence 2 Informatique
Nom : ................................................................
Prénom : ............................................................
Classe : ............................................................
Durée : 2 heures
Documents autorisés : Aucun
Exercice 1 : Transitions CSS (4 points)
Créer une page contenant trois boutons :
Bouton 1 : Vert
Bouton 2 : Orange
Bouton 3 : Bleu
Consignes
1. Ajouter une transition de 0,5 seconde sur toutes les propriétés.
2. Au survol (:hover) :
o le bouton change de couleur ;
o il s'agrandit légèrement ;
o les coins deviennent plus arrondis.
3. Au clic (:active) :
o le bouton rétrécit légèrement.
4. Ajouter une ombre lors du survol.
Compétences évaluées
transition
transition-duration
transition-property
transition-timing-function
:hover
:active
Exercice 2 : Transformations CSS (4 points)
Créer une galerie contenant 6 images.
Consignes
Au survol de chaque image :
1. effectuer un zoom de 20 % ;
2. effectuer une rotation de 10° ;
3. déplacer légèrement l'image vers le haut ;
4. ajouter une ombre portée.
Les images doivent retrouver leur état initial lorsque la souris quitte l'image.
Compétences évaluées
transform
scale()
rotate()
translateY()
box-shadow
Exercice 3 : Display Flex et Display Grid (5
points)
Créer une page composée des éléments suivants :
un en-tête (Header)
un menu de navigation
une section contenant 8 cartes
un pied de page (Footer)
Partie A : Flexbox
Le menu doit être réalisé avec Flexbox.
Conditions :
les liens sont alignés horizontalement ;
ils sont centrés ;
un espace identique sépare chaque lien.
Partie B : Grid
Les cartes doivent être réalisées avec CSS Grid.
Conditions :
4 colonnes sur un grand écran ;
espace de 20 px entre les cartes ;
chaque carte possède :
o une image,
o un titre,
o un paragraphe,
o un bouton.
Compétences évaluées
display:flex
justify-content
align-items
gap
display:grid
grid-template-columns
grid-gap
Exercice 4 : Responsive Design (4 points)
À partir de l'exercice précédent, rendre la page responsive.
Consignes
Adapter automatiquement la disposition selon la largeur de l'écran.
Ordinateur (> 992 px) : 4 colonnes
Tablette (768 px à 992 px) : 2 colonnes
Téléphone (< 768 px) : 1 colonne
Le menu de navigation devra :
devenir vertical sur téléphone ;
occuper toute la largeur de l'écran.
Les images devront toujours rester responsives.
Compétences évaluées
@media
max-width
min-width
flex-direction
width
height:auto
Exercice 5 : Validation d'un formulaire CSS
(3 points)
Créer un formulaire d'inscription contenant :
Nom
Prénom
Email
Téléphone
Mot de passe
Confirmation du mot de passe
Consignes
Sans utiliser JavaScript :
1. Les champs obligatoires doivent être identifiés avec required.
2. Lorsqu'un champ est valide :
o bordure verte.
3. Lorsqu'un champ est invalide :
o bordure rouge.
4. Lorsqu'un champ reçoit le focus :
o bordure orange ;
o légère ombre.
5. Personnaliser également :
o le bouton Envoyer ;
o le bouton Réinitialiser.
Compétences évaluées
:valid
:invalid
:focus
:required
border
outline
box-shadow
Bonus (+2 points)
Créer une page d'accueil moderne pour une université en utilisant :
les variables CSS (:root) ;
Flexbox ;
Grid ;
des transitions ;
des transformations ;
un formulaire responsive ;
un thème Vert / Orange.
Barème
Exercice Points
Exercice 1 4
Exercice 2 4
Exercice 3 5
Exercice 4 4
Exercice 5 3
Bonus +2
Total 20 (+2 bonus)
Consignes générales
Le code HTML et CSS doit être bien indenté et commenté.
Les noms des classes et des identifiants doivent être explicites.
Le code doit respecter les bonnes pratiques vues en cours.
Les étudiants doivent utiliser uniquement HTML5 et CSS3, sans framework
(Bootstrap, Tailwind, etc.) ni JavaScript.