Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md
Anurag Gupta f90dc7d903 fix(curriculum): update challenge to heading tags instead of headers (#43429)
* header changed to heading tag

* fix: Exercise about heading tags <h1> ... <h6>, accidentally refers to header tags

* fix: changed header to heading on pages affected

* Update curriculum/challenges/_meta/applied-visual-design/meta.json

Co-authored-by: Ilenia <nethleen@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-002.md

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* Update curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.md

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* file renamed

* dashed-name changed for all languages

* made changes in all the challenges

* file title changed

* added cypress test

* cypress test added

* Update cypress/integration/learn/redirects/heading-challenge.js

Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>

Co-authored-by: Ilenia <nethleen@gmail.com>
Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com>
2021-10-25 16:17:54 +01:00

2.8 KiB

id, title, challengeType, videoUrl, forumTopicId, dashedName
id title challengeType videoUrl forumTopicId dashedName
587d781b367417b2b2512abd Adjust the Size of a Heading Element Versus a Paragraph Element 0 https://scrimba.com/c/c3bRPTz 301037 adjust-the-size-of-a-heading-element-versus-a-paragraph-element

--description--

The font size of heading elements (h1 through h6) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the font-size property to adjust the size of the text in an element.

--instructions--

To make the heading significantly larger than the paragraph, change the font-size of the h4 element to 27 pixels.

--hints--

Your code should add a font-size property to the h4 element set to 27 pixels.

assert($('h4').css('font-size') == '27px');

--seed--

--seed-contents--

<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;

  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

--solutions--

<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>