Responsive Blog preview card using Flexbox, bem and SCSS

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 7 months ago

  Hi, good job!

  Here are some suggestions - I hope it helps :)

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Change .blog-preview-card-section into a <main>.

  • Screen readers recognize images, so you shouldn't have "image" or "photo" in the alt text.

  • Consider wrapping the date in a <time> tag:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>.

  • "HTML & CSS" is the card heading, so wrap it in a <h2. Keep the link, as that would be needed on a blog card.

  • A more suitable alt text for the profile image would be "Headshot of Gary Hooper".

  • "Greg Hooper" is not a heading, as it doesn't introduce any content. If it were, it would be a <h3>, as you cannot go from a <h2> to a <h4>. Make it a <p>.

  CSS:

  • Including a CSS Reset at the top is good practice.

  • Add around 1rem of padding on the body, so the card doesn't touch the edges on small screens.

  • .blog-preview-card-section doesn't need any properties, so move them(except for display: flex which the body already has) to the body. Change height to min-height - this way, the content will not get cut off if it grows beneath the viewport. Add gap: 2rem, to create some space between the card and the footer.

  • Remove the width on the card, and the height on the top image.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • font-size must never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • It's common to use numbers for line-height, so I would switch 150%% to 1.5. Since you use the same line-height on several elements, I would add it to the body, and remove it elsewhere.

  • Similarly, you don't need to put the font-family on every element. A more efficient way is to remove them and add font-family to body. The children will inherit the value.

  • Media queries should be in rem, and usually we do the mobile styles as the default.

  Marked as helpful

  1

  ---

  

  P

  DalaScript•530

  @DalaScriptPosted 7 months ago

  @Islandstone89 I really appreciate it, thank you very much, I will definitely fix it and upload a new version. <3

  1

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 7 months ago

  @NikaDalalishvili Glad to help! You don't need to submit a new solution, though. This solution is linked to your GitHub repository, so any changes you make there will be reflected here.

  Marked as helpful

  1

  

  P

  DalaScript•530

  @DalaScriptPosted 7 months ago

  @Islandstone89 While you are here, I will ask you something. When I change something in my code and then upload it to github, and when I view the page using github page, the changes are reflected very late (and sometimes I think not at all), is this correct or am I doing something wrong (I mean should the changes be reflected late)? Thanks once again.

  0

  

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 7 months ago

  @NikaDalalishvili It usually takes a few minutes to apply the changes. I like to do a hard refresh(Ctrl+F5) untill it shows. But you shouldn't have to wait more than 5 minutes, for me the changes usually appear after 1 or 2 minutes.

  0
• 

  Elias sips 🍵•80

  @wassimboualamPosted 7 months ago

  Looks fine, nothing to say really.

  1

  ---

  

  P

  DalaScript•530

  @DalaScriptPosted 7 months ago

  @wassimboualam Thank u so much!

  0