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 made with HTML and CSS in VSCode

@Silo30

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?

This was similar to my first challange and i'm happy that much of what i learned during it stick with me during this one. I thought that the shadow of the card would be difficult to make, but to my surprise it was very simple, so that's something i'm happy with.

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

The 'Learning' Tag took me some time to figure out how to do properly. Looking back with hindsight, it shouldn't have take me soo long to do it. I'll make sure to remember this in future challanges.

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

my styling could be a bit more organized. I think i could have made it shorter and easier for other people to understand it. If anyone see any area for improvement, I'm open ears.

Community feedback

@deux-trios

Posted

Design:

  1. At first glance the colour of the main card container should be white, and the scale is bigger than the original design but it's a nitpick
  2. Overall the design is 1 to 1. Good job
  3. The scale of the card shrinks when you zoom out. It would be great if it's static so the content can be seen by people who don't know that the their browser is zoomed out
  4. The layout is good on every screen size

HTML

  1. I don't like the spaces between the code.
  2. I also don't like how the <footer> tag is indented. I think it's on par with main since they are both landmark elements

Overall The solution doesn't go too far from the design. I give it a 8/10

Marked as helpful

1

@Silo30

Posted

@deux-trios

Thanks for the feedback and critcism!

Design:

  1. I don't remember how i messed up the color, but i will correct that as soon as I can. The size is something i will take some tries to get the right one, but it shouldn't be too hard. I was basing it on the deskop design example and trying to match it as close as possible, but i guess that's not the best way to do it.
  2. It makes me very happy to heart that. Thanks.
  3. Thanks for the tip. I didn't think of that. Will make it static soon.
  4. Good to hear. I use a extension called Resposive Viewer to check it web pages will look in different screen sizes.

HTML

  1. I usually leave these spaces to make it easier to read different code sections, but i understand that can look bad for others.
  2. That's fair. Will try to adjust it later.

Again thanks for your criticism! It gave a lot to think about my project.

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