Workit Landing Page with HTML CSS

Community feedback

• 

  Yefree Valdez•840

  @yefreescodingPosted over 1 year ago

  Excellent work! Your solution closely resembles the original design. Overall, you've accomplished nearly everything correctly.

  After reviewing your code, I'd like to offer some tips on how to improve its readability, semantics, and cleanliness.

  • While <div> elements are useful, they should be used sparingly and only when there are no better alternatives or to section different parts of the content. For instance:

  /* 
  You've done a commendable job with class naming.
  However, it might not prove as effective when browsers 
  attempt to 'read' your content and convert it for accessibility 
  purposes, such as reader mode.
  */
   <div class="article">
            <div class="article-number"><p>3</p></div>
            <div class="article-title-and-text">
              <h2 class="article-title">Always affordable</h2>
              <p class="article-text">
                Always affordable pricing that scales with your business. Get
                top-quality product data analytics services without hidden costs
                or unexpected fees.
              </p>
            </div>
          </div>
  

  • A good practice would be something like this:

   <article class="article">
     <div class="article-number" aria-label=“Article number 3”>3</div>
     <div class="article-title-and-text" aria-label=“Article content”>
        <h2 class="article-title">Always affordable</h2>
        <p class="article-text">
                Always affordable pricing that scales with your business. Get
                top-quality product data analytics services without hidden costs
                or unexpected fees.
         </p>
     </div>
   </article>
  

  Using HTML tags like article, header, section, aside, nav, is going to make your code more readable and better for accessibility. Also you should learn about aria-attributes, this will take your html syntax to the next level. One las tip, this one is learn how to implement the BEM methodology to name classes. 🙌

  • Don’t forget to add a value to the alt attributes:

   <img
            src="assets/images/bg-pattern-3.svg"
            class="bg-pattern-three"
            // 👀
            alt=""
          />
  

  • Know the difference between a button and a anchor link:

  // Use buttons to trigger an user interaction 
  <button class="header-button">Open menu</button>
  
  // Use anchor links to redirect the user to another page.
  <a href=“./learn-more.html” class="header-button">Learn more</button>
  

  Hope this could help you become a better front end developer. There’s still a bunch of stuff to learn, and a long way to go but you’re going in the right direction. keep it up!!

  Marked as helpful

  1

  ---

  

  İsmail Berberoğlu•190

  @iberberogluPosted over 1 year ago

  Hey @yefreescoding 👋🏻 Thank you so much for the feedback.🙏🏻 What you have written is very valuable and informative for me. I'll check out what you said :)

  0