Frontend Mentor | Blog preview card coding challenge solution

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy that I was able to do it alone and have a result that was very close to what I expected.

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

the main challenge for me was positioning the avatar image and the name side by side.

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

I couldn't leave the paragraph in the same way as in the design, if anyone knows, give me a hand

Community feedback

Sagi• 120

@ratsagi

Posted 4 months ago

Greetings, Lucas!

Good job on compliting this challenge! I have some suggestions about your code that might interest you:

Try to use html 5 semantic landmarks like "main" "section" "article" "footer" instead of div or give the div the role like "main" or "banner" navigation and so on. It is important for screen readers.
Try to use relative units instead of absolute for instance rem for fonts and em for padding and margin. It is important because if you change font size of your browser settings it is difficult to read. The text and other things must be responsive for all screen sizes.
Use css custom property. it is important for maintainability for example, if you want to modify something you change the property value in one thing as a result you change it everywhere it needs to be. You save your time if you use it.

I think the solustion that you are seeking is line-height. If you apply it, the paragraph of your body should look similar to design.

Marked as helpful

Blog preview card