Submitted 3 months ago

Responsive simple page using Flexbox and HTML Semantic

MrLanter•220

@MrLanter

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

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

Daniel Alejandro Cano Cardona•110
@DacardonacPosted 3 months ago
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

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