Workit Landing Page with HTML CSS

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!!