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

Responsive simple page using Flexbox and HTML Semantic

MrLanter 140

@MrLanter

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 challenges did you encounter, and how did you overcome them?

I couldn't get the yellow rectangle containing 'Learning' to have the correct width. I had to use max-width: max-content, a property I learned from Intellisense.

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

Is the semantics of my project correct ? Is the code well organized ? What improvements are possible ? I feel like the avatar hover animation is not very smooth, do you have any idea how to fix this ?

Community feedback

@Dacardonac

Posted

Hello MrLanter, I hope you are doing very well. I was reviewing your solution, and I want to congratulate you on the excellent work you sent. I also want to give you some feedback on certain points where you can improve your project.

  • The design is excellent and very similar but you could improve it using the correct values they give you in the Figma file.

  • Something that I saw missing in your HTML is the Metadata, which helps you improve the SEO and which positions you better in the search engines, in this link, you can read more about that: Metadata and SEO

  • The last point is like a recommendation: Investigate the Modularization of styles with Sass. This will help you maintain better order, make the code more readable, and save lines of code.

I hope that with my comment you can improve, I wish you good luck and that you are very well.

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