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 build with html and css

@kirstiAnja

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


Feedback is welcome

Community feedback

@devid8642

Posted

Firstly, congratulations on the solution.

I have some suggestions for your project:

Consider using flexbox to center the card instead of using large padding and margin values in the main and body. You can remove these values and use them in main:

main {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 100vh;
}

Also consider using relative units for the values of margin, padding and font-size, in this case REM. I recommend that you research the usefulness of doing this as it is good practice.

Finally, the formatting of your HTML file is a little inadequate. I recommend using a formatting tool like prettier (https://prettier.io), which makes the job of keeping the file well formatted much easier. This tool integrates with the main code editors that currently exist.

Again, congratulations on the solution. I hope you found my review helpful.

Marked as helpful

0

waru-guru 60

@waru-guru

Posted

@devid8642 Thank you for the tip! I had forgotten to even add the closing tag for the link on the stylesheet. let me apply the following. Thank you once again!

1

@kirstiAnja

Posted

@devid8642 Thank you for your feedback. I am grateful for your suggestions and I have taken them into notice. In my latest project I have used rem units. I have had trouble centering things on the page, but in my latest project I did it easy.

1

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