Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card

@manasmaity506

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@Mohamedkabba444

Posted

Mobile-Friendly Tips:

  1. Use media queries to apply styles for different screen sizes.
  2. Set viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3. Use flexible units (e.g., %, em, rem) instead of fixed units (px).
  4. Use min, max and clamp to set font sizes
  5. 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:

  1. Follow a consistent naming convention.
  2. Use indentation and whitespace for readability.
  3. Break long lines of code into smaller, manageable sections.
  4. Consider using a CSS preprocessor (e.g., Sass, Less) for better organization.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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