Responsive coming soon page using flex & utility classes

Community feedback

• 

  Coder Suresh•870

  @coderSureshPosted about 1 year ago

  Hi there, great work.

  I am seeing a couple of issues with your project.

  First of all, your HTML has some validation errors. (You can validate your HTML here: https://validator.w3.org/)

  The first issue is that we can't use any <section> or <div> inside of the <ul>. In this case, you can remove the <section class='desktop-error'> and it will work fine.

  Another issue is that it is better not to use a trailing slash / on a self-closing element. For example, you are using an input tag as

  <input type='text' ... />

  which can be used as

  <input type='text' ... >

  You can read the reason here https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing

  The third issue is that we can't use <span> as a child of <ul>. Instead, you can put <span> inside the <li> tag.

  For example, you are showing an error message as:

      <li>
              <input type="email" id="mail" name="user_email" placeholder="Your email address..."
                class="form-input border-round">
      </li>
      <span role="alert" id="emailError" aria-hidden="true">
                <em>Please provide a valid email address</em>
      </span>
  

  But, it is better to do it this way,

  <li>
              <input type="email" id="mail" name="user_email" placeholder="Your email address..."
                class="form-input border-round">
              <span role="alert" id="emailError" aria-hidden="true">
                <em>Please provide a valid email address</em>
              </span>
  </li>
  

  The final issue I am seeing is that the image is overflowing on smaller devices and that is because you are setting fixed width using rem unit.

  I saw on line 75 of style.css that you are setting max-width: 100%; on img and picture tag. However, I saw no effect of using it.

  Instead, you can set width: 100%; so that the image takes full width on the smaller screen and takes maximum 35.45188rem when the device width is larger than 35.45188rem.

  This way you can make the image responsive.

  Thanks.

  Marked as helpful

  1

  ---

  

  P

  Natalie Smyth•340

  @nataliesmythPosted about 1 year ago

  @coderSuresh Thank you so much! This was really helpful. I'm going to make those changes and resubmit this challenge. p.s: I forgot to add my alt's for images. I think I procrastinate adding them because they always sound silly or I'm not sure if I'm doing in properly. Any tips on alt text?

  0

  

  Coder Suresh•870

  @coderSureshPosted about 1 year ago

  @nataliesmyth I'm glad it helped you.

  The alt (alternative) text is something users see if the image is not displayed on the web page.

  So, it should be human readable and give general idea of what was expected to be visible (the image).

  Alt tags also help in SEO (search engine optimization). For example, if you're a owner of an ecommerce and you're selling 'comfortable purple t-shirt', you can add that in alt tag.

  But, in this case, since the image is nothing more than a decorative element, we can use empty alt tag alt="" and add aria-hidden="true" to hide the image from accessibility tree. (screen readers won't read it.)

  Let me know if this helps you.

  Thanks 🙏.

  Marked as helpful

  1