You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
3.1 KiB
41 lines
3.1 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "a212cc22a18eddf9046b7a16dfbafd8b",
|
|
"translation_date": "2025-10-03T08:25:37+00:00",
|
|
"source_file": "3-terrarium/2-intro-to-css/assignment.md",
|
|
"language_code": "fr"
|
|
}
|
|
-->
|
|
# Devoir de refactorisation CSS
|
|
|
|
## Objectif
|
|
|
|
Refactoriser le projet de terrarium pour utiliser **Flexbox** ou **CSS Grid** pour la mise en page. Mettez à jour le HTML et le CSS si nécessaire afin d'obtenir un design moderne et réactif. Vous n'avez pas besoin de mettre en œuvre des éléments glissables—concentrez-vous uniquement sur la mise en page et le style.
|
|
|
|
## Instructions
|
|
|
|
1. **Créez une nouvelle version** de l'application terrarium. Mettez à jour le balisage et le CSS pour utiliser Flexbox ou CSS Grid pour la mise en page.
|
|
2. **Assurez-vous que l'art et les éléments sont en place** comme dans la version originale.
|
|
3. **Testez votre design** dans au moins deux navigateurs différents (par exemple, Chrome, Firefox, Edge).
|
|
4. **Prenez des captures d'écran** de votre terrarium dans chaque navigateur pour démontrer la compatibilité inter-navigateurs.
|
|
5. **Soumettez** votre code mis à jour et les captures d'écran.
|
|
|
|
## Barème
|
|
|
|
| Critères | Exemplaire | Adéquat | À améliorer |
|
|
|------------|---------------------------------------------------------------------------|--------------------------------------|---------------------------------------|
|
|
| Mise en page | Entièrement refactorisée avec Flexbox ou CSS Grid ; visuellement attrayante et réactive | Certains éléments refactorisés ; utilisation partielle de Flexbox ou Grid | Peu ou pas d'utilisation de Flexbox ou Grid ; mise en page inchangée |
|
|
| Compatibilité inter-navigateurs | Captures d'écran fournies pour plusieurs navigateurs ; apparence cohérente | Captures d'écran pour un navigateur ; légères incohérences | Pas de captures d'écran ou incohérences majeures |
|
|
| Qualité du code | HTML/CSS propre et bien organisé ; commentaires clairs | Organisation moyenne ; peu de commentaires | Code désorganisé ; absence de commentaires |
|
|
|
|
## Conseils
|
|
|
|
- Consultez les guides [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) et [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid/).
|
|
- Utilisez les outils de développement des navigateurs pour tester la réactivité.
|
|
- Commentez votre code pour plus de clarté.
|
|
|
|
---
|
|
|
|
**Avertissement** :
|
|
Ce document a été traduit à l'aide du service de traduction automatique [Co-op Translator](https://github.com/Azure/co-op-translator). Bien que nous nous efforcions d'assurer l'exactitude, veuillez noter que les traductions automatisées peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d'origine doit être considéré comme la source faisant autorité. Pour des informations critiques, il est recommandé de recourir à une traduction humaine professionnelle. Nous déclinons toute responsabilité en cas de malentendus ou d'interprétations erronées résultant de l'utilisation de cette traduction. |