3 Column Preview Card

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @Sypnotick 👋🏻

  I've got some feedback to help you fix the HTML issues and some other things.

  • You made a correct decision by adding aria-hidden="true", but in this case alt you should also have an empty alt tag. This will fix the issues, just don't forget to generate a new report once you fix them.
  • Perhaps you forgot to include font-family, which you can find in Frontend Mentor's original folder in style-guide.md file, but that's not a problem. I already got the links for you, all you have got to do is to add these link in head of html file.

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap" rel="stylesheet" />
  

  when you add the fonts, you may need to make some adjustments, but I know you got it 🙃

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 other than that, you did a good job, nicely done. Cheers 👾

  Marked as helpful

  1

  ---

  

  Giedrius•120

  @giedrius-zavisaPosted about 3 years ago

  Hello, @kens-visuals!

  Thank you for the feedback! You were right in saying that I forgot about the font part. I was working late, so it completely slipped my mind. Updated the solution to use the fonts now.

  Hearing encouragement from other people is always nice, since it shows me that I'm going in the right direction, so thank you for checking out my solution and leaving a comment.

  Have a good one :)

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @Sypnotick you're welcome, glad to be helpful 😇

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout seems smaller and font-family is not being used properly. The responsiveness should be addressed since the layout gets very squished before transitioning to mobile breakpoint, try to look at point 510px, you will see the layout squished. Mobile layout looks great though.

  Ken already gave great feedback on this , just going to add some suggestions as well:

  • Do not alter the width of the body you can remove the width props.
  • Using margin to center the content is not consistent, instead you can remove that and on the body tag add these:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  Though by using this, I see that your layout is not centered as well, and looking at the elements, you are using width: 20%; on the .card_option which makes those 3 cards not centered. I recommend remove that, add a max-width on the parent flexbox and never use vw on the width.

  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. Have a look at Grace's solution on this one inspect the layout and see the usage of h1 as well the stylings applied to it, copy those since you will use that a lot.
  • Always include the href to the a tag so that it will function properly.
  • Lastly, addressing the site being squished:>

  Aside from those, great work again on this one.

  1

  ---

  

  Giedrius•120

  @giedrius-zavisaPosted about 3 years ago

  Hello, @pikamart

  Thank you for checking out my solution and leaving feedback. I checked out all of your suggestions and you were completely right. I updated my solution, so now it should look better.

  Have a good one :)

  1