Submitted 3 months ago

CSS/HTML only

Luka-998•80

@Luka-998

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 am most proud of centering by vertically and horizontally.

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

Biggest challenge was understanding primary and secondary axis of flexbox. eg. justify-content (as a primary) and align-items (as secondary)

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

With display:grid;

Community feedback

Steven Stroud•11,910
@StroudyPosted 3 months ago
Hey Luka, Your solution is not responsive and practically unviewable, You can change a few things to make it more responsive,

You do not need to have display: flex on every element, avoid using display: absolute, It causes problems and takes elements out of the flow.

Watch this video from Kevin Powell A practical guide to responsive web design,

You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.

Another great resource for px to rem converter.

You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset.

Check out this article from a Frontend mentor dev about responsive-meaning.

I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻
Marked as helpful
1
Luka-998•80
@Luka-998Posted 3 months ago
@Stroudy Hey Steven! Really appreciate your feedback, and I will check the link you provided. I have corrected my solution now, but these information were really helpful. Thank you very much for your time and effort! Bye
0
Teodor Jenkler•3,820
@TedJenklerPosted 2 months ago
Hi @Luka-998,

Nice project! Here are a few suggestions:

I noticed that there are too many containers (i.e., <div> elements). To simplify your layout, you can make the <body> a flex container with align-items: center and justify-content: center. Use one main card with flex-direction: column to stack all content without unnecessary nesting. This approach will greatly improve your SEO and accessibility, and also make your code more readable and maintainable, especially for larger projects. Additionally, you can use the <footer> element for the Frontend Mentor footer.

Another cool way to center a <div> is by setting position: relative on the parent, position: absolute on the content, with top: 50%, left: 50%, and transform: translate(-50%, -50%). While Grid is also an option, it can be more complex. For this project, using Flexbox is the recommended approach.

I noticed that you are using HTML tags more for styling rather than their intended meaning. For example, <h1> should be reserved for the page title, <h2> for main headings, <h3> for subheadings, and <h4> for sub-subheadings. An improvement would also be to use the <time> element where appropriate and clean up unnecessary semantics like redundant <section> tags.

Keep up the great work!

Best, Teodor
Marked as helpful
0
Luka-998•80
@Luka-998Posted 2 months ago
@TedJenkler Thank you very much Teodor, your recommendations are really helpfull!
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