3-terrarium/2-intro-to-css/assignment.md
Transform your terrarium project to use modern CSS layout techniques! Refactor the current absolute positioning approach to implement Flexbox or CSS Grid for a more maintainable, responsive design. This assignment challenges you to apply modern CSS standards while maintaining the visual appeal of your terrarium.
Understanding when and how to use different layout methods is a crucial skill for modern web development. This exercise bridges traditional positioning techniques with contemporary CSS layout systems.
rem, em, %, vw, vh) instead of fixed pixels/* 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;
}
| Criteria | Exemplary (4) | Proficient (3) | Developing (2) | Beginning (1) |
|---|---|---|---|---|
| Layout Implementation | Masterful use of Flexbox/Grid with advanced features; fully responsive | Correct implementation with good responsive behavior | Basic implementation with minor responsive issues | Incomplete or incorrect layout implementation |
| Code Quality | Clean, well-organized CSS with meaningful comments and consistent naming | Good organization with some comments | Adequate organization with minimal comments | Poor organization; difficult to understand |
| Cross-Browser Compatibility | Perfect consistency across all required browsers with screenshots | Good compatibility with minor differences documented | Some compatibility issues that don't break functionality | Major compatibility problems or missing testing |
| Responsive Design | Exceptional mobile-first approach with smooth breakpoints | Good responsive behavior with appropriate breakpoints | Basic responsive features with some layout issues | Limited or broken responsive behavior |
| Documentation | Comprehensive README with detailed explanations and insights | Good documentation covering all required elements | Basic documentation with minimal explanations | Incomplete or missing documentation |
š Advanced Layouts: Implement both Flexbox AND Grid in different parts of your design š Animation Integration: Add CSS transitions or animations that work with your new layout š Dark Mode: Implement a CSS custom properties-based theme switcher š Container Queries: Use modern container query techniques for component-level responsiveness
š” Remember: The goal isn't just to make it work, but to understand WHY your chosen layout method is the best solution for this particular design challenge!