RWD Using CSS Grid, Flexbox, SASS

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  Awesome work on this challenge Phut! Your solution is definitely close to the design, so well done 👏👏👏

  Your page content is well-structured and it's great to see you using HTML semantic structural tags. Here are a few pointers based on your code and questions:

  • I'd say the main element should be the element that you've currently got the .main-content class on. This is really the main content on the page and so I'd say it makes more sense that way.
  • Make sure you don't uppercase your text in your HTML if you expect screen readers to read it out as a word. For your h1 you've currently got:

  <h1><span class="heading-color">WE'RE</span> COMING SOON</h1>
  

  Screen readers will read this out letter-by-letter, which isn't your intended behaviour. Instead, I'd do this:

  HTML:
  <h1><span class="heading-color">We're</span> coming soon</h1>
  
  CSS:
  h1 { text-transform: uppercase; }
  

  • For the input error text, you could also use the role="alert" attribute to help announce the error to screen reader users when the error text is injected. Here's a good MDN article for more information on the role attribute.

  I hope those tips help. Let me know if you have any more questions!

  1

  ---

  

  Phut•455

  @phut-tranPosted about 5 years ago

  @mattstuddert Your tips are helping me out a lot. I appreciate that. I also read the article at MDN and install ChromVox screen reader to test the code. Right now, all issues fixed. Can't wait to next challenges.

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 5 years ago

  @tdphut no worries! Glad they're helping and that's awesome that you made the fixes and installed ChromeVox.

  I'm looking forward to seeing your next solution!

  0