Design comparison
SolutionDesign
Solution retrospective
What challenges did you encounter, and how did you overcome them?
These are some challenges I faced
- How to center the card
- How to use flexbox
- How to make the shadow around the card
I overcome them by searching online
What specific areas of your project would you like help with?I want to know how can I make the website mobile friendly?
- I am only doing the desktop design part as of now.
I feel my codes are messy and I need guideline how to use semantic elements and when I should just go with div?
- If you look at my index.html file, You will understand what I am talking about.
Community feedback
- @Mohamedkabba444Posted 2 months ago
Mobile-Friendly Tips:
- Use media queries to apply styles for different screen sizes.
- Set viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Use flexible units (e.g., %, em, rem) instead of fixed units (px).
- Use min, max and clamp to set font sizes
- Test and iterate using browser dev tools or mobile devices.
Check out the video link below by Kevin Powell focusing on responsive web design.
https://www.youtube.com/watch?v=x4u1yp3Msao&t=60s&pp=ygUacmVzcG9uc2l2ZSBsYXlvdXQgaHRtbCBjc3M%3D
Code Organization:
- Follow a consistent naming convention.
- Use indentation and whitespace for readability.
- Break long lines of code into smaller, manageable sections.
- Consider using a CSS preprocessor (e.g., Sass, Less) for better organization.
Marked as helpful1
Please log in to post a comment
Log in with GitHub
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