
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
Proud Achievements
-
Systematic Spacing System
- Created a consistent spacing scale (100-1600)
- Maintained visual rhythm across breakpoints
-
Clean BEM Implementation
- Modular CSS structure
- Clear component relationships
- Easy to maintain and scale
-
Semantic HTML
- Used appropriate elements (
article
,section
,picture
) - Enhanced accessibility and SEO
- Used appropriate elements (
Would Do Differently
-
CSS Architecture
- Use CSS custom properties for breakpoints
- Implement a more robust reset/normalize strategy
- Create utility classes for common patterns
-
Component Structure
- Break down recipe card into smaller components
- Create reusable patterns for lists and tables
- Better separation of concerns
-
Performance
- Optimize images for different viewports
- Implement progressive loading
- Add print styles
-
Testing
- Add cross-browser testing
- Implement accessibility testing
- Create responsive design test cases
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord