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

Blog Preview Card

@jmprz

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 are you most proud of, and what would you do differently next time?

Slowly I'm finally learning about the flexbox and the positioning of elements or div.

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

At first, I went with the mobile-first design route but I realized that the design did not need media queries, so I decided to remove those breakpoints and then modified the CSS to be more accurate.

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

Is there anything that I can improve within my code? I feel like that it needs some improvement especially using flexbox and margins

Community feedback

@KapteynUniverse

Posted

I think you can move the flex on the .container to the body and remove container div.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

flex-direction: column; on the .container-box doesn't do anything because container box is a child of the flex div, but you can use flex-direction to the element you used flex. I recommend you to check this page for flex tricks

Imgs needs to have meaningful alt text, but here the img is decorative so you can leave alt text empty.

"Learning" doesn't need to be a button but if you are going with button, a hover effect would be nice.

Avoid using hard coded values, like width: 380px; use max-width: 380px; instead, max-width: 25rem; would be even better. Em/rem units are better for responsiveness. I recommend you to check Kevin Powell's this video for better understanding.

A modern css reset for every project will help you.

Do not skip headings and also don't use them for sizes, you can always style them.

Also this component is for to use in a web page and every page should only have one h1(mostly). This is a simple card, it would never be used to serve the main heading on a page, using a h2 "HTML & CSS foundations" for the would be better. But on the future challenges doing this will give you a warning on the HTML report when you submit a solution. If it bugs you, you can create a h1 with some text and make it for screen reader only.

I would use p tag for the "These languages are the backbone of every website, defining structure, content, and presentation." too

flex-direction: row; on the .container-avatar is also doing nothing because by default it is row.

For margins; Instead of giving everything a margin, you can use gap and padding on the flex container. Gap works with flex and grid.

Marked as helpful

2

@jmprz

Posted

@KapteynUniverse Thank you for the feedback and also for the helpful tips/links provided! I will update the code once I apply all the lessons I learned

1
1lija 140

@1lija

Posted

Since Kapteyn already said about flexbox Im just gonna add that you should use a bit more semantics in your html such as <article>, <section>, attribution at the bottom? just use footer. It looks cleaner to read afterwards and you know what it is after you read footer

Marked as helpful

1

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