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
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 learnt how to use flexbox grid in different ways.

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

Removing the underline of the link was very difficult honestly ahahah

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

Code readability (css), and conventions about css

Community feedback

P

@DanielClement37

Posted

On the html side of things you could have been more descriptive with which html tags you used and named some of the classes better to be more descriptive. For example the article image is wrapped by a div named <div class="img">. That can get confusing when on the css side of things if you type .img{ /*css here */} vs just img{ /*css here */} and be effecting entirely different elements. For a naming suggestion instead of the <div class="img"> I used this

<figure class="blog-art">
		<img src="./assets/images/illustration-article.svg" alt="blog-art" />
</figure>

Over all though your solution visually is very close to the design and the only critique for that I would say is that it is slightly bigger.

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