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

Bhaskar Bordoloiβ€’ 140

@bhaskrr

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


Had fun doing this project, any suggestions are welcome.

Community feedback

Daniel πŸ›Έβ€’ 44,230

@danielmrz-dev

Posted

Hello @bhaskrr!

Your project looks great!

Just a few suggestions for improvement:

  • The main tag is used for main content (including text and images), not just for main text or titles. In this project, the whole card is the main content, so you can wrap the whole thing with main.

  • header and footer are tags for top and bottom content of the whole page, not header and bottom of the card. So you can place that footer outside of the card, so it won't take up space unnecessarily.

I hope it helps!

Other than those details, you did a very good job!

Marked as helpful

0
accama muhammadβ€’ 280

@accamamuhammad

Posted

Nice solution, however I noticed a few problems with it. These are the issues and their fixes.

1.The attribute should not be in the blog preview card it should be outside at the bottom of the page: To fix this remove the attribute div and place it outside then set it position: absolute then bottom: 0 and position: relative on the preview card container to fix this.

2.Use media Queries to apply style for different screen sizes learn more about them on youtube

3.Do not separate your paragraphs use text-wrap: wrap; to make it change based on screen size

4.USe the proper Font-weight for different texts based on designs

Marked as helpful

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