3 column preview cards - html and css only

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted almost 2 years ago

  Hello Joanna Skrzypczak, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

  to solve this problem do this:

  <a href="/" class="suv-btn">Learn More</a>

  I noticed that in higher resolutions the content is stretching a lot, to solve this we can do the following:

  @media only screen and (min-width: 1350px)
  main {
      max-width: 910px;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Sometimes what I do is I add h1, refresh the report and then remove it from my code once it's all good. Some projects do have a such design that you don't need some things but for the sake of the report, you can change it temporarily. I would also add some hover transitions for the buttons, looks much more pleasing. 😊

  Marked as helpful

  0

  ---

  

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  @catherineisonline Thanks! 😊

  0
• 

  Sinisa Vukmirovic•1,690

  @SinisaVukmirovicPosted almost 2 years ago

  Hello!

  About your dilema when some of these challenges don't have a header. I think you are right, I do the same. Have a header with a "hidden" <h1> tag in it. I remember watching some tutorial where it was explained to always have an H1, so that the screen readers can see it, and then hide it if it is not needed to be visible on the page.

  0

  ---

  

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  @SinisaVukmirovic Thanks for the comment. I did some research and I found that having <h1> on the website not only improves accessibility but is also important for SEO. However, I didn't find a single answer - some people suggested to hide it while others just don't include h1 on such pages :/ On the other side Functional Accessibility Evaluator 2.3 states that 'The h1 element should be visible graphically and to assistive technologies. It should not be hidden using CSS techniques.'

  I think that I will keep the hidden <h1> in my solution. Accessibility is an interesting and important topic but it's sometimes hard to meet all of the standards.

  0
• 

  khalid sabbah•110

  @khalid-sabbahPosted almost 2 years ago

  great job

  0

  ---

  

  Joanna Skrzypczak•530

  @joaskrPosted almost 2 years ago

  @khalid-sabbah thanks :)

  1