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

David S 150

@davsanter1

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?

First time I worked on a project like this took me like 1 week to complete it, now it took me like 20 minutes

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

To keep the footer at the bottom of the page

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

Not sure, any feed back is appreciated.

Community feedback

@R3ygoski

Posted

Hello David, congratulations on completing your project.

To move the footer to the bottom of the screen, add the following properties to it:

position: absolute;
bottom: 0;

That should be enough.

Your Card is breaking on screens with a width of 320px. If you want to fix this, you can try something like width: clamp(18rem, 80%, 24rem).

Another tip, now related to HTML, try to use more semantic tags. Your project is good, but it lacks semantics. For example, <div class="card"> would make more sense to replace the <div> with <main>.

Congratulations on the project and for being able to complete it in less time than the first one. This shows that you are improving. Keep up the good work, and if you need help, just comment below, and I'll try to assist in the best way possible.

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