
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
- Mobile-First Development
- Started with mobile layout and progressively enhanced for larger screens
- Used CSS custom properties for responsive design
:root {
--spacing-100: 8px;
--spacing-300: 24px;
}
- BEM Methodology
- Implemented BEM naming convention for better CSS organization
- Created modular and reusable components
Jessica Randall
- CSS Transitions & Hover Effects
- Added smooth transitions for better UX
- Implemented hover states with transforms
.profile-card__link {
transition: all 0.3s ease;
}
.profile-card__link:hover {
transform: translateY(-2px);
}
- Accessibility Improvements
- Used semantic HTML elements
- Added proper alt text for images
- Ensured proper color contrast
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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