Skilled elearning landing page

Community feedback

• 

  Vicktor•900

  @Victor-NyagudiPosted almost 2 years ago

  Hi, Titus.

  Good attempt on this one.

  First things first, if you have a bug in your code, it's standard practice to open an issue in the repo. This could be a bug, a requested feature, or asking for help, just like this issue I created in your repo.

  I noticed you used an <article> as a container for the cards here.

  <article class="page-cards"> // <- Here it is
  <div class="card first">
    <img src="" alt="">
    <h2>Check out our most popular courses!</h2>
  </div>
  <div class="card">
    <img src="./assets/icon-animation.svg" alt="Animation">
    <div class="card--details">
      <h2 class="card--title">Animation</h2>
      <p class="card--info">Learn the latest animation techniques to create stunning motion 
        design and captivate your audience.</p>
      <a class="card--link" href="">Get Started</a>
    </div>
  </div>
  <div class="card">
    <img src="./assets/icon-design.svg" alt="Design">
    <div class="card--details">
      <h2 class="card--title">Design</h2>
    <p class="card--info">Create beautiful, usable interfaces to help shape the future of 
      how the web looks.</p>
    <a class="card--link" href="">Get Started</a>
    </div>
  </div>
    
  <div class="card">
    <img src="./assets/icon-photography.svg" alt="Photography">
    <div class="card--details">
      <h2 class="card--title">Photography</h2>
      <p class="card--info">Explore critical fundamentals like lighting, composition, and focus 
        to capture exceptional photos.</p>
      <a class="card--link" href="">Get Started</a>
    </div>
  </div>
  <div class="card">
    <img src="./assets/icon-crypto.svg" alt="Crypto">
    <div class="card--details">
      <h2 class="card--title">Crypto</h2>
      <p class="card--info">All you need to know to get started investing in crypto. Go from beginner 
        to advanced with this 54 hour course.</p>
      <a class="card--link" href="">Get Started</a>
    </div>
  </div>
  <div class="card">
    <img src="./assets/icon-business.svg" alt="Business">
    <div class="card--details">
      <h2 class="card--title">Business</h2>
      <p class="card--info">A step-by-step playbook to help you start, scale, and sustain your business 
        without outside investment.</p>
      <a class="card--link" href="">Get Started</a>
    </div>
  
  </div>
  </article>
  

  I'd recommend using a <section> instead.

  <article> works best for blocks of text that can make sense on their own or when shared, for example, an article, as the name suggests.

  Here's some more information on using the article tag you'll find useful.

  Either way, good job on thinking about using semantic elements in your HTML. A lot of people forget about them.

  Hope this helps.

  All the best with other solutions.

  1
• 

  Titus Coleman•40

  @Titus-ColemanPosted almost 2 years ago

  Thanks Vicktor, I edited to the section tag.

  0