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

Responsive blog card using flex

Aditya-en 70

@Aditya-en

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 learnt about box-sizing: border-box; which was life saver when it comes to defining size and padding

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

I needed some help to center the card to the middle of the page. Then took some help from claude.

Community feedback

dbmourits 60

@dbmourits

Posted

good job, it looks pretty similar to the example picture. only your pictures seem broken.

you were a little too eager with your src referral. its enough to start with /assets/images, there is no need to start with /blog-preview-card-main. your index.html is on the same level as our assets/images folder.

be careful using "/" in folder/directory names, it is better to create a folder "assets" and in the "assets" folder a new folder named "images".

See the "reserved characters" in the link below for the characters which should not be used naming files and directories: https://learn.microsoft.com/en-us/windows/win32/fileio/naming-a-file

For the rest you are on the right track, well done.

Marked as helpful

0

Aditya-en 70

@Aditya-en

Posted

@dbmourits thanks man, I solved the issue.

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