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 Solution using SASS

@PJIceskull

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


  • Are there any other hover states that I should have added?
  • Should the font be smaller when the user is viewing the design on mobile screens?

Community feedback

T
Grace 29,310

@grace-snow

Posted

I see issues in this - I'll share Screenshots in the discord so you can see. It's caused by the height 100vh on the body (which should be min-height) and the height 100% on the html (which shouldn't be there at all)

Other issues:

  • how would someone click through and read this post when there is no interactive element (anchor) within it? It's impossible at the moment
  • you are misusing section. That should be a div
  • read up how to write good alt text on images. "Profile picture" and "header-illustration" is not good alt text
  • the attribution should be in a footer landmark not inside main
  • you will never want to use width 100vw at all. Viewport units don't include the width of scrollbars or device notches so all width 100Vw can ever do is cause horizontal scroll when you don't want it
  • font family declarations should always include fallbacks
  • max width on the component needs to be in rem not px
  • there is no need for a min height at all
  • never change the cursor to pointer on non interactive elements! That makes them look clickable when they're not
  • the tagbox must not have an explicit width. You don't actually need a div on that at all - place the class onto the paragraph to style it. You should be using padding not width on it whatever you do
  • use gap with flex not margin on children

Marked as helpful

2

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