Responsive preview card component using HTML and CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi @Li-Bee

  I'm afraid the html on this needs changing, it doesn't make sense at the moment and would have a really bad effect on assistive tech and search engines (might be useful for you to read too @darryncodes)

  • a header element doesn't go inside main, it's a separate landmark. Technically you can have headers and footers inside articles, but assistive tech users generally dislike that as it clutters up what is announced to them on the page and can be confusing when using landmarks to navigate.
  • similarly article doesn't make sense for only part of this content. If using article it needs to be the whole component, heading, text and image. They all belong to the same one component.
  • if announcing an image as valuable content like you are doing here never use a div, use an img element, that's what it's for. The image should be in the html if it's deemed meaningful.
  • by using css grid for the stats you've broken their meaning. Each number-word pair needs to be read together, which means they need to be in the same meaningful element as each other. The best semantics I can see for this content would be acheived by an unordered list containing 3 list items. Inside each list item the number can be wrapped in a span or strong tag set to display block via a class. That means you wouldn't be able to use grid as planned (annoying I know)

  Layout-wise I'm seeing a few strange things viewing on mobile (ill add Screenshots to slack so you can see what I'm seeing)

  • the card is touching screen edges. Usually you mitigate against that with some padding on the outer wrapper, or you could add a little margin on the component itself
  • the card is showing up about halfway down the screen on page load. That just looks strange
  • on mobile landscape the view has switched to desktop layout already so the image becomes all squished. Make sure your media queries kick in at the point where there is room for the layout to change

  I hope this helps ☺

  Marked as helpful

  2

  ---

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi @grace-snow really useful to read, thanks for tagging me!

  0

  

  LiBee•370

  @Li-BeePosted almost 3 years ago

  @grace-snow Thanks Grace really helpful and the screenshots are also helpful. I did message you on slack and to ask about how you did semantic html links with one of your projects and how you hid it.

  Do you have any reference i can read in regards to these semantic links before?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @Li-Bee I think you mean accessibily hidden link text, not semantic links... Here's a really in depth article but there are lots of smaller ones out there https://www.sarasoueidan.com/blog/accessible-text-labels/

  Deque has a lot of good info (source of the accessibility reports in these challenges)

  Marked as helpful

  1

  

  LiBee•370

  @Li-BeePosted almost 3 years ago

  @grace-snow if i announce the picture as an img i seem to be unable to put the purple overlay over the picture (see below) do you know what the alternative is? Thanks

  background-image: linear-gradient(
        to right bottom,
        rgba(170, 92, 219),
        rgba(170, 92, 219)
      ),
      url("../img/image-header-desktop.jpg");
  

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @Li-Bee the image url is the background image, you don’t need a linear gradient on this at all. You need a background color and mix blend mode

  Marked as helpful

  1
• 

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hi LiBee,

  Your solution looks really good - well done on this one!

  • you've almost got the purple overlay perfect. i'd remove the opacity on the linear-gradient background-image: linear-gradient( to right bottom, rgba(170, 92, 219), rgba(170, 92, 219) ) and add background-blend-mode: multiply;
  • grid was a good choice for your stats layout, nice one. Gap is a really useful option whilst using Flexbox but you just need to be careful as it's not adopted by all browsers yet
  • you could clear up your accessibility report if you change your <section> tag to a <main> tag and use <article> or a <div> for where your <main> tag is now

  Keep coding!

  Marked as helpful

  1

  ---

  

  LiBee•370

  @Li-BeePosted almost 3 years ago

  @darryncodes Thanks - why would you remove the opacity on the gradient - is it to get the purple tone right? Please can you explain what background-blend-mode:multiply does please? (All so i can understand before updating)

  For the accessibility report i was trying to use the correct landmarks but get a but confused - if it was you, for preview cards would you article or div? Why would you not use section at all is it because I am not doing a section of a website just a component of it.

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  Hey @Li-Bee, yeah that's right, the tone would be weird with opacity and background-blend-mode together. background-blend-mode controls how the image and the colour blends, it has quite a few properties. It might be worth having a play around with it in the browser inspect element tool.

  Ah that's okay, it's really good that you're thinking about using more descriptive mark up. This guide is pretty comprehensive it explains what each elements does. A section is still a good choice but it requires a heading.

  I'd swap:

  • <section class="section-insights"> for <main class="section-insights">
  • <main> for <article>
  • <div class="attribution"> for <footer class="attribution">

  And then you can refresh the report. Just to double check it's all good!

  Marked as helpful

  1

  

  LiBee•370

  @Li-BeePosted almost 3 years ago

  @darryncodes done! Let me know what you think - i think the purple tone definately looks better!

  0

  

  darryncodes•6,370

  @darryncodesPosted almost 3 years ago

  yesssss @Li-Bee you've smashed it.

  It's great you're persevering and refining your design - nice work!

  0