Skip to content

assignment.md

Latest commit

 

History

History
127 lines (101 loc) · 7.84 KB

assignment.md

File metadata and controls

127 lines (101 loc) · 7.84 KB

Mission de refactoring CSS

Objectif

Transformez votre projet terrarium pour utiliser des techniques modernes de disposition CSS ! Refactorez l'approche actuelle de positionnement absolu pour implémenter Flexbox ou CSS Grid afin d'obtenir un design plus maintenable et réactif. Ce travail vous met au défi d’appliquer les standards CSS modernes tout en conservant l'attrait visuel de votre terrarium.

Comprendre quand et comment utiliser différentes méthodes de mise en page est une compétence essentielle du développement web moderne. Cet exercice fait le lien entre les techniques traditionnelles de positionnement et les systèmes de mise en page CSS contemporains.

Instructions de la mission

Phase 1 : Analyse et planification

  1. Passez en revue votre code terrarium actuel - Identifiez les éléments utilisant actuellement le positionnement absolu
  2. Choisissez votre méthode de mise en page - Décidez si Flexbox ou CSS Grid convient le mieux à vos objectifs de conception
  3. Esquissez la nouvelle structure de votre mise en page - Planifiez comment les conteneurs et les éléments plantes seront organisés

Phase 2 : Mise en œuvre

  1. Créez une nouvelle version de votre projet terrarium dans un dossier séparé
  2. Mettez à jour la structure HTML au besoin pour prendre en charge la méthode de mise en page choisie
  3. Refactorez le CSS pour utiliser Flexbox ou CSS Grid au lieu du positionnement absolu
  4. Maintenez la cohérence visuelle - Assurez-vous que vos plantes et le bocal du terrarium apparaissent aux mêmes emplacements
  5. Implémentez une adaptabilité responsive - Votre mise en page doit s’adapter harmonieusement à différentes tailles d’écran

Phase 3 : Tests et documentation

  1. Tests multi-navigateurs - Vérifiez que votre design fonctionne sous Chrome, Firefox, Edge et Safari
  2. Tests responsives - Contrôlez votre mise en page sur mobiles, tablettes et écrans de bureau
  3. Documentation - Ajoutez des commentaires dans votre CSS expliquant vos choix de mise en page
  4. Captures d'écran - Prenez des captures de votre terrarium dans différents navigateurs et tailles d’écran

Exigences techniques

Mise en œuvre de la mise en page

  • Choisir UNE SEULE solution : implémentez soit Flexbox, soit CSS Grid (pas les deux pour les mêmes éléments)
  • Design responsive : utilisez des unités relatives (rem, em, %, vw, vh) au lieu de pixels fixes
  • Accessibilité : conservez une structure HTML sémantique correcte et textes alternatifs
  • Qualité du code : adoptez des conventions de nommage cohérentes et organisez le CSS logiquement

Fonctionnalités CSS modernes à inclure

/* Example Flexbox approach */
.terrarium-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.plant-containers {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
}

/* Example Grid approach */
.terrarium-layout {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  gap: 1rem;
}

Exigences de support navigateurs

  • Chrome/Edge : 2 dernières versions
  • Firefox : 2 dernières versions
  • Safari : 2 dernières versions
  • Navigateurs mobiles : iOS Safari, Chrome Mobile

Livrables

  1. Fichier HTML mis à jour avec une structure sémantique améliorée
  2. Fichier CSS refactoré utilisant des techniques modernes de mise en page
  3. Collection de captures d’écran montrant la compatibilité multi-navigateurs :
    • Vue bureau (1920x1080)
    • Vue tablette (768x1024)
    • Vue mobile (375x667)
    • Au moins 2 navigateurs différents
  4. Fichier README.md documentant :
    • Votre choix de mise en page (Flexbox vs Grid) et vos motivations
    • Les difficultés rencontrées lors du refactoring
    • Notes sur la compatibilité navigateurs
    • Instructions pour exécuter votre code

Grille d’évaluation

Critères Exemplaire (4) Compétent (3) En développement (2) Débutant (1)
Mise en œuvre de la mise en page Utilisation maîtrisée de Flexbox/Grid avec fonctionnalités avancées; totalement responsive Mise en œuvre correcte avec bon comportement responsive Mise en œuvre basique avec quelques problèmes de responsivité Mise en œuvre incomplète ou incorrecte
Qualité du code CSS propre, bien organisé, commentaires pertinents et nommage cohérent Bonne organisation avec quelques commentaires Organisation adéquate avec peu de commentaires Mauvaise organisation ; difficile à comprendre
Compatibilité multi-navigateurs Parfaite cohérence sur tous les navigateurs requis avec captures d’écran Bonne compatibilité avec différences mineures documentées Quelques problèmes de compatibilité sans rupture de fonctionnalité Problèmes majeurs de compatibilité ou tests absents
Design responsive Approche mobile-first exceptionnelle avec points de rupture fluides Bon comportement responsive avec points de rupture adaptés Fonctionnalités responsives basiques avec quelques problèmes de mise en page Comportement responsive limité ou cassé
Documentation README complet avec explications détaillées et analyses Bonne documentation couvrant tous les éléments requis Documentation basique avec explications minimales Documentation incomplète ou absente

Ressources utiles

Guides de méthode de mise en page

Outils de test navigateurs

Outils qualité du code

Défis bonus

🌟 Mises en page avancées : Implémentez Flexbox ET Grid dans différentes parties de votre design
🌟 Intégration d’animations : Ajoutez des transitions ou animations CSS compatibles avec votre nouvelle mise en page
🌟 Mode sombre : Implémentez un switcher de thème basé sur les propriétés CSS personnalisées
🌟 Requêtes conteneur : Utilisez les techniques modernes de requêtes conteneur pour une responsivité au niveau composant

💡 Souvenez-vous : Le but n’est pas seulement que ça fonctionne, mais aussi de comprendre POURQUOI votre méthode de mise en page choisie est la meilleure solution pour ce défi de conception particulier !

Avis de non-responsabilité : Ce document a été traduit à l’aide du service de traduction automatique Co-op Translator. Bien que nous nous efforcions d’assurer l’exactitude, veuillez noter que les traductions automatiques peuvent contenir des erreurs ou des inexactitudes. Le document original dans sa langue d’origine doit être considéré comme la source faisant foi. Pour les informations critiques, il est recommandé de faire appel à une traduction professionnelle réalisée par un humain. Nous ne saurions être tenus responsables de tout malentendu ou mauvaise interprétation résultant de l’utilisation de cette traduction.