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

Oluwa-Sanniโ€ข 40

@Oluwa-Sanni

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 will continue to improve on my styling. Apparently there is a lot for me to learn when it comes to styling.

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

I had issue with positioning the footer to the base of the body.

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

Positioning the footer at the base and also properly aligning the author name and image.

Community feedback

Adrian Rangelโ€ข 250

@radriann21

Posted

My advices:

  1. Use more semantic tags. The tag that encompasses the card should be "article" by convention and to separate the text from the illustration, use a "section". You don't need to use br for separation, use margin properties.

  2. Use reset css (not mandatory but good practice!)

  3. Also use CSS variables

  4. Use the colors and all the resources that the project brings! It should be as close to the design that is presented. Although you can add a touch of your own design.

  5. The design doesn't look good at smaller sizes (320px)

However, the design is quite similar to the one presented and the project looks good!

0

Oluwa-Sanniโ€ข 40

@Oluwa-Sanni

Posted

Thank you for this feedback @radriann21

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