12.FeaturedArticlesSection-HuffPostClone

BNTA logo

HuffPost Clone - Featured Articles Section

Objectives

  • Part 1. featured title section

    • BEM naming

    • Commit

  • Part 2. first featured article

    • More BEM naming

    • Screen read and accessibility

    • Commit

  • Part 3. Copy in rest of articles - mobile version complete

Table of contents

Featured Title Section

<div class="featured__title">
  <h2 class="featured__title__text">
    Featured
  </h2>
</div>

  • Above is an example of breaking the BEM convention of block__element for block__element__element

Commit:

  • git add .

  • git status

  • git commit -m "Add feature title section"

  • git log --oneline

  • git push -u origin main

Featured Article Section

<div class="featured__articles">

  <div class="article">
    <a class="article__image" aria-label="Sabina Nessa: What We Know About Teacher Killed In South London"
      aria-hidden="true" tabindex="-1"
      href="https://www.huffingtonpost.co.uk/entry/sabina-nessa-attack-london_uk_614b4770e4b0efa77f885088">
      <img loading="lazy" alt="" width="224" height="126" src="../../images/sabinaNessa.jpeg">
    </a>

    <div class="article__text">
      <a href="https://www.huffingtonpost.co.uk/news/" class="article__text__category"
        aria-label="Go to Huffington Post News">
        News
      </a>

      <a class="article__text__headline"
        href="https://www.huffingtonpost.co.uk/entry/sabina-nessa-attack-london_uk_614b4770e4b0efa77f885088">
        <h3>
          Sabina Nessa: What We Know About Teacher Killed In South London
        </h3>
      </a>
    </div>


  </div>
</div>

  • BEM naming

  • featured__article image has been removed from accessiblity tree and had attribute tabindex set to -1 so that it is not a focusable element.

  • This is so that a user using a screen reader does not recieve a repeat of the same information.

Commit:

  • git add .

  • git status

  • git commit -m "Add featured article"

  • git log --oneline

  • git push -u origin main

Full Featured Articles Section

<section id="featured" class="featured">
  <div class="featured__title">
    <h2 class="featured__title__text">
      Featured
    </h2>
  </div>

  <div class="featured__articles">

    <div class="article">
      <a class="article__image" aria-label="Sabina Nessa: What We Know About Teacher Killed In South London"
        aria-hidden="true" tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/sabina-nessa-attack-london_uk_614b4770e4b0efa77f885088">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/sabinaNessa.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/news/" class="article__text__category"
          aria-label="Go to Huffington Post News">
          News
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/sabina-nessa-attack-london_uk_614b4770e4b0efa77f885088">
          <h3>
            Sabina Nessa: What We Know About Teacher Killed In South London
          </h3>
        </a>
      </div>


    </div>

    <div class="article">
      <a class="article__image" aria-label="Insulate Britain Protester Storms Off Good Morning Britain Interview"
        aria-hidden="true" tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/insulate-britain-protester-storms-off-good-morning-britain-during-heated-interview-with-richard-madeley-and-susanna-reid_uk_614ae32be4b0d9b6de9d8b7e">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/insulateBritainProtester.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/entertainment/" class="article__text__category"
          aria-label="Go to Huffington Post Entertainment">
          Entertainment
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/insulate-britain-protester-storms-off-good-morning-britain-during-heated-interview-with-richard-madeley-and-susanna-reid_uk_614ae32be4b0d9b6de9d8b7e">
          <h3>
            Insulate Britain Protester Storms Off Good Morning Britain Interview
          </h3>
        </a>
      </div>
    </div>

    <div class="article">
      <a class="article__image" aria-label="Angela Rayner Tells Dominic Raab To 'Go Back To His Sun-Lounger'"
        aria-hidden="true" tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/angela-rayner-dominic-raab-pmqs_uk_614b130ce4b0e5dd4b2e4f9b">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/angelaRayner.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/politics/" class="article__text__category"
          aria-label="Go to Huffington Post Politics">
          Politics
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/angela-rayner-dominic-raab-pmqs_uk_614b130ce4b0e5dd4b2e4f9b">
          <h3>
            Angela Rayner Tells Dominic Raab To 'Go Back To His Sun-Lounger'
          </h3>
        </a>
      </div>
    </div>

    <div class="article">
      <a class="article__image" aria-label="The TikTok Detectives Who Claim They Helped Find Gabby Petito's Body"
        aria-hidden="true" tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/tiktok-gabby-petito-investigation-wyoming_uk_614aebafe4b0175a18388c56">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/tikTokDetectives.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/news/" class="article__text__category"
          aria-label="Go to Huffington Post News">
          News
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/tiktok-gabby-petito-investigation-wyoming_uk_614aebafe4b0175a18388c56">
          <h3>
            The TikTok Detectives Who Claim They Helped Find Gabby Petito's Body
          </h3>
        </a>
      </div>


    </div>
    <div class="article">
      <a class="article__image" aria-label="Willie Garson, Sex and The City's Stanford Blatch, Has Died Aged 57"
        aria-hidden="true" tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/willie-garson-dead-dies-sex-and-the-city-stanford-black_uk_614aca18e4b0175a18382b90">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/williamGarson.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/entertainment/" class="article__text__category"
          aria-label="Go to Huffington Post Entertainment">
          Entertainment
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/willie-garson-dead-dies-sex-and-the-city-stanford-black_uk_614aca18e4b0175a18382b90">
          <h3>
            Willie Garson, Sex and The City's Stanford Blatch, Has Died Aged 57
          </h3>
        </a>
      </div>
    </div>

    <div class="article">
      <a class="article__image" aria-label="An Expert's Simple Explanation For The Energy Crisis" aria-hidden="true"
        tabindex="-1"
        href="https://www.huffingtonpost.co.uk/entry/energy-shortage-explained_uk_614b1028e4b0e5dd4b2e450f">
        <img loading="lazy" alt="" width="224" height="126" src="../../images/energy.jpeg">
      </a>

      <div class="article__text">
        <a href="https://www.huffingtonpost.co.uk/news/" class="article__text__category"
          aria-label="Go to Huffington Post News">
          News
        </a>

        <a class="article__text__headline"
          href="https://www.huffingtonpost.co.uk/entry/energy-shortage-explained_uk_614b1028e4b0e5dd4b2e450f">
          <h3>
            An Expert's Simple Explanation For The Energy Crisis
          </h3>
        </a>
      </div>


    </div>
  </div>
</section>

  • We now have our mobile first version finished

PreviousmarkdownNextHTML_CSS

Last updated

Was this helpful?