Submitted 2 months ago

Blog preview card using Flexbox

Extendo99•110

@Extendo99

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I tried to set the dynamic width of the container in percentages, but I found that a rigid assignment of the container width would be better in this case. I would definitely start positioning the elements differently next time.

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

I had a problem with the responsiveness of the container but I used media queries.

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

I definitely need help in creating responsive designs that will look good on various screens.

Community feedback

MrLanter•220
@MrLanterPosted 2 months ago
Hi, congratulations for this great work!

I am far from being a pro in responsive, but I can give you some other advice:

Text sizes: Text sizes should always be in rem. Some people enlarge their text size in the browser settings and putting this size in px would not respect their preferences. Here is a clear explanation on this subject

HTML indentation: It is recommended to follow a good indentation of the HTML code for better readability. I do not know if it is intentional, but it is difficult to understand the code when the child elements are not aligned.

Semantic HTML: Using <div> repeatedly can sometimes be complicated for readability. I advise you to use semantic tags such as <main>, <article>, <footer>, ... This can also improve the page's SEO for the browser.

I hope these tips have helped you! Have a nice day!
1

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