Skip to content
Submitted over 1 year ago

Four Card Feature using Grid

ohuttar•160
@ohuttar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I'd love to hear your feedback on semantic HTML, accessibility, and general CSS advice. Thanks for your time!

Community feedback

  • Eileen dangelo•1,600
    @EileenpkPosted over 1 year ago

    @Ohuttar,

    Every page should have some content that tells the viewer what it's about or at least some kind of context for the rest of the information on the page. After all, the purpose of a website is to relay information about something. I would pick the piece of content that best describes the page or gives the most context.

    Marked as helpful
    1
    ohuttar•160
    @ohuttarPosted over 1 year ago

    @Eileenpk Thanks for the reply, have a nice day!

    0
  • Eileen dangelo•1,600
    @EileenpkPosted over 1 year ago

    Hi Ohuttar, your project looks great, and this might be a helpful tip.

    You have

    <h1 class="visually-hidden">AI-Powered Project Manager</h1>

    .visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

    Search engines use complex algorithms to evaluate web pages and determine their relevance and quality based on a variety of factors, including the content on the page, the page structure, and the links to and from the page. Using hidden text could be seen as a black-hat SEO technique and is likely to result in penalties or even a ban from search engines, which can have a significant negative impact on your website's visibility and traffic.

    I recommend removing this hidden text and replacing the first <p> tag with an <h1>, you can then add these tags inside the <head> tag

    <title>
     Four Card Feature
 </title>
 <meta
     name="description"
     content="AI-Powered Project Manager"
/>
// This is for social media 
<meta
     property="og:title"
     content="what you want the title of the page to be on social media when 
     someone posts/shares"
        />
<meta
      property="og:description"
      content="what you want the description to be on social media when 
     someone posts/shares"
        />

    Hope you found this helpful!

    Marked as helpful
    1
    ohuttar•160
    @ohuttarPosted over 1 year ago

    @Eileenpk Thank you for taking the time to comment!

    I had no idea that a penalty was possible for hiding an h1. I'm going to make the changes that you recommended.

    Out of curiosity, do you have any recommendations on what to do if there is no semantic h1? Would you omit it, or give whatever content there is an h1 tag, even if it doesn't make sense as a heading?

    Thanks again for your time!

    0

Please log in to post a comment

Log in with GitHub

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