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

@InaJaweed

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 are you most proud of, and what would you do differently next time?

I am proud of the end outcome, It was bit confusing as CSS is completely new to me and I suck at it. It has been a good practice with css flexbox and media queries. Next time I want to make sure my code is maintainble and can be read easily by others as I feel like i have used css elements in areas that I didnt have to or there was a better solution to this approach.

What challenges did you encounter, and how did you overcome them?

Media Queries was confusing and trying to guess the sizes of each area for this project. For media queries a simple google search and little bit reading helped me understand the basics.

What specific areas of your project would you like help with?

Media Queries and CSS. I think i have overcomplicated this simple project and used a lot of redundant css in different areas making it hard to maintain and read.

Community feedback

@Ramon-Alvez

Posted

You could try using max-width instead of width, this saves me a lot of headaches in terms of responsiveness, the site basically becomes responsive on its own.

Another thing I do is to maintain the spacing givin the card a side margin, so it stays "floating" on the page, it ends up combining well with max-width ;)

0

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