fix: use dfn instead of code tag (#36640)
* Use dfn tags
* remove misused <dfn> tags
* Revert "remove misused <dfn> tags"
This reverts commit b24968a968.
* Update curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.english.md
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Make "array" lowercase
Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
* Fix dfn usage
* Address last dfn tags
This commit is contained in:
SomeDer
Randell Dawson
@ -8,7 +8,7 @@ forumTopicId: 301044
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.
|
||||
CSS treats each HTML element as its own box, which is usually referred to as the <dfn>CSS Box Model</dfn>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <dfn>normal flow</dfn> of a document, but CSS offers the position property to override it.
|
||||
When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
|
||||
|
||||
```css
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 301086
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
To create a CSS variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
|
||||
To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:
|
||||
|
||||
```css
|
||||
--penguin-skin: gray;
|
||||
|
||||
@ -14,7 +14,7 @@ There are other ways that you can override CSS. Do you remember inline styles?
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use an <code>inline style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:
|
||||
Use an inline style to try to make our <code>h1</code> element white. Remember, in line styles look like this:
|
||||
<code><h1 style="color: green;"></code>
|
||||
Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
|
||||
</section>
|
||||
|
||||
@ -16,7 +16,7 @@ These four values work like a clock: top, right, bottom, left, and will produce
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
Use Clockwise Notation to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18349
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
|
||||
That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
|
||||
With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
|
||||
When you entered <code><h2 style="color: red;">CatPhotoApp</h2></code>, you were styling that individual <code>h2</code> element with inline CSS, which stands for Cascading Style Sheets.
|
||||
That's one way to specify the style of an element, but there's a better way to apply CSS.
|
||||
At the top of your code, create a <code>style</code> block like this:
|
||||
|
||||
```html
|
||||
@ -18,7 +18,7 @@ At the top of your code, create a <code>style</code> block like this:
|
||||
</style>
|
||||
```
|
||||
|
||||
Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
|
||||
Inside that style block, you can create a <dfn>CSS selector</dfn> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
@ -8,8 +8,8 @@ forumTopicId: 18350
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.
|
||||
We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
|
||||
Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
|
||||
We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
|
||||
In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.
|
||||
|
||||
```css
|
||||
@ -22,7 +22,7 @@ body {
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>.
|
||||
Replace the word <code>black</code> in our <code>body</code> element's background-color with its hex code representation, <code>#000000</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -15,7 +15,7 @@ To do this, just add the word "checked" to the inside of an input element. For e
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Set the first of your <code>radio button</code>s and the first of your <code>checkbox</code>es to both be checked by default.
|
||||
Set the first of your radio buttons and the first of your checkboxes to both be checked by default.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16814
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML has a special element for creating <code>unordered lists</code>, or bullet point style lists.
|
||||
HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet point style lists.
|
||||
Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>
|
||||
For example:
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16821
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.
|
||||
Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than one answer.
|
||||
Checkboxes are a type of <code>input</code>.
|
||||
Each of your checkboxes can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the checkbox input with the label element surrounding it.
|
||||
All related checkbox inputs should have the same <code>name</code> attribute.
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16822
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
You can use <code>radio button</code>s for questions where you want the user to only give you one answer out of multiple options.
|
||||
You can use <dfn>radio buttons</dfn> for questions where you want the user to only give you one answer out of multiple options.
|
||||
Radio buttons are a type of <code>input</code>.
|
||||
Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the radio button input with the label element surrounding it.
|
||||
All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
|
||||
|
||||
@ -8,7 +8,7 @@ forumTopicId: 16824
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
HTML has another special element for creating <code>ordered lists</code>, or numbered lists.
|
||||
HTML has another special element for creating <dfn>ordered lists</dfn>, or numbered lists.
|
||||
Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists are closed with the <code></ol></code> tag.
|
||||
|
||||
For example:
|
||||
|
||||
@ -8,9 +8,9 @@ forumTopicId: 18178
|
||||
|
||||
## Description
|
||||
<section id='description'>
|
||||
Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
Web developers traditionally use <dfn>lorem ipsum text</dfn> as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.
|
||||
Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.
|
||||
Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum text".
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -15,7 +15,7 @@ This element tells the browser about the structure of your website. <code>h1</co
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML <code>element</code> below your "Hello World" <code>h1</code> element.
|
||||
Add an <code>h2</code> tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" <code>h1</code> element.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -16,7 +16,7 @@ Then your browser will display the text <strong>"this links to freecodecamp.org"
|
||||
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has "cat photos" as its <code>anchor text</code>.
|
||||
Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has "cat photos" as its anchor text.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
@ -24,7 +24,7 @@ Create an <code>a</code> element that links to <code>http://freecatphotoapp.com<
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Your <code>a</code> element should have the <code>anchor text</code> of "cat photos".
|
||||
- text: Your <code>a</code> element should have the anchor text of "cat photos".
|
||||
testString: assert((/cat photos/gi).test($("a").text()));
|
||||
- text: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>
|
||||
testString: assert(/http:\/\/(www\.)?freecatphotoapp\.com/gi.test($("a").attr("href")));
|
||||
|
||||
@ -9,9 +9,9 @@ forumTopicId: 18276
|
||||
## Description
|
||||
<section id='description'>
|
||||
Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.
|
||||
First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>code editor</code>, which is embedded into this web page.
|
||||
Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.
|
||||
Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.
|
||||
First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.
|
||||
Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML element.
|
||||
Most HTML elements have an opening tag and a closing tag.
|
||||
Opening tags look like this:
|
||||
<code><h1></code>
|
||||
Closing tags look like this:
|
||||
|
||||
Reference in New Issue
Block a user