Ping Coming Soon using HTML, CSS, Javascript

Community feedback

• 

  Shahin NJ•1,190

  @SJ-Nosrat

  Posted almost 4 years ago

  Hi Fazza, Your solution looks great! I hope the following suggestion help! Please look into refactoring the following code:

   <section class="copyright">
          <a href="#" class="fa fa-facebook"></a>
          <a href="#" class="fa fa-twitter"></a>
          <a href="#" class="fa fa-instagram"></a>
          <br />
          <small>© Copyright Ping. All rights reserved.</small>
  </section>
  

  Instead of the above, use <ul> elements, as follows:

   <section class="copyright">
      <ul>
         <li><a href="#" class="fa fa-facebook"></a></li>
         <li><a href="#" class="fa fa-twitter"></a></li>
         <li> <a href="#" class="fa fa-instagram"></a></li>
       </ul>
       <span>© Copyright Ping. All rights reserved.</span>
  </section>
  

  Try and don't use <small> if you're trying to achieve the text to appear smaller instead style your elements using <span> for decorative purposes.

  Also,

  * {
    margin: 0;
    padding: 0;
    box-sizing: inherit;  /* WHY DON'T YOU JUST ADD ---border-box--- here? */
  }
  

  Also, add the following code to your HTML <div role="main" class="main-container"> to the opening tag of your main-container class. You can check the generated report and fix the accessibility issues too. MDN article on WAI-ARIA.

  Best of luck on your coding journey!

  01

  Marked as helpful
• 

  P

  Patrick•14,265

  @palgramming

  Posted almost 4 years ago

  Looks really good the only thing it looks like you are missing are the circles around your social icons

  01