Checkout my last (HTML/CSS) NEWBIE PROJECT - Four Card Feature Section

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 1 year ago

  This looks quite broken on my mobile (I’ll add some screenshots so you can see on slack)

  With the HTML

  • header does not belong inside main. It is it’s own distinct landmark. This is not a full web page, so everything you’re building here can go inside main, but no header required
  • similarly, no article is needed on this challenge. Articles are for holding self contained content that could be syndicated across different pages or websites (like a blog article). It’s not a generic wrapper for containing some content as you’re using it here
  • you shouldn’t be using section like this either really. It’s not doing any harm but not bringing any benefit either. Each of the cards could be sections but it’s completely unnecessary. Sections only have additional semantics when they are labelled anyway, otherwise they’re just like divs. Keep html as simple as you can.
  • as others have said, this should be one h1 not a paragraph and h1
  • and as others have said, the icon images are decorative so alt should be left as an empty string
  • don’t load separate css files in the head like this. You are damaging performance by making an extra server call for no benefit

  And with the css

  • Do not change the html font size to 62.5%! I’ve written a post that explains why I think this is a terrible thing to do.
  • do mobile styles first. Those should always be the default styles. Then override only the properties you need to change in a min width media query
  • define media queries in rem or em, never px
  • the way you are changing font sizes all over this, both outside and inside the media query will create a total nightmare in bigger projects. It will be unmaintainable I promise you. Just don’t do this
  • I believe the overlapping content and some being hidden off screen that I can’t scroll to is probably caused by multiple height 100%s in there. I’m away from computer so unable to inspect and see what’s happening to confirm. I would expect to see a min height 100Vh in there somewhere and no more than one height 100% (if any)
  • at the very start of a stylesheet you should always include a css reset. Andy bell and Josh Comeau both have blogs with good examples you could use.

  Marked as helpful

  1
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Georgenico! 👋

  Congratulations on finishing all the free newbie challenges! 🎉 That is incredible. 👏

  A couple of suggestions:

  • "Reliable, efficient delivery powered by technology" should be wrapped with a <h1>. The text is one sentence. You can put the other text to the next line by wrapping the text with <span> element. Then, make it a block element using display property.
  • Those icons are decorative images. So, you should leave the alternative text empty. This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't add any information and serve only aesthetic purposes.

  I hope this helps. Happy coding! 😄

  Marked as helpful

  0

  ---

  

  George Manimbo•180

  @GeorgenicoPosted over 1 year ago

  Hi @vanzasetia , I would like to ask why do I need to change it to display block element? And also, for the alt text, is it the semantic way of doing that? If yes, I will get an error on the accessibility report? Thank you!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Georgenico

  You make the <span> as a block element to move the wrapped text to the next line.

  I don't understand "the semantic way".

  You will not get an error if the site has empty alternative text images.

  You can read the following articles to learn more about writing alternative texts.

  • How-to: Are you making these five mistakes when writing alt text?
  • Quick tip: Using alt text properly - The A11Y Project
  • Avoid these common alt-text mistakes - Scope for business
  • Images Tutorial | Web Accessibility Initiative (WAI) | W3C

  0