Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md

120 lines
2.8 KiB
Markdown
Raw Permalink Normal View History

---
id: 587d781b367417b2b2512abd
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 19:17:54 +04:00
title: Adjust the Size of a Heading Element Versus a Paragraph Element
challengeType: 0
videoUrl: 'https://scrimba.com/c/c3bRPTz'
forumTopicId: 301037
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 19:17:54 +04:00
dashedName: adjust-the-size-of-a-heading-element-versus-a-paragraph-element
---
# --description--
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 19:17:54 +04:00
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--
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 19:17:54 +04:00
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.
```js
assert($('h4').css('font-size') == '27px');
```
# --seed--
## --seed-contents--
```html
<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--
```html
<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>
```
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 19:17:54 +04:00