fix(curriculum): Replace single-line blocks with multi-line blocks for Responsive Web Design (#41519)

* fix(curriculum) replace single-line block with multi-line blocks

* fix(curriculum) replace single-line block with multi-line blocks (missed blocks)
This commit is contained in:
Sem Bauke
2021-03-19 00:24:09 +01:00
committed by GitHub
parent a4e4ffce99
commit b064991667
36 changed files with 136 additions and 48 deletions

View File

@ -13,7 +13,9 @@ Let's add a `submit` button to your form. Clicking this button will send the dat
Here's an example submit button:
`<button type="submit">this button submits the form</button>`
```html
<button type="submit">this button submits the form</button>
```
# --instructions--

View File

@ -13,7 +13,9 @@ You can add images to your website by using the `img` element, and point to a sp
An example of this would be:
`<img src="https://www.freecatphotoapp.com/your-image.jpg">`
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg">
```
Note that `img` elements are self-closing.
@ -25,7 +27,9 @@ Ideally the `alt` attribute should not contain special characters unless needed.
Let's add an `alt` attribute to our `img` example above:
`<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">`
```html
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
```
# --instructions--
@ -33,9 +37,7 @@ Let's try to add an image to our website:
Within the existing `main` element, insert an `img` element before the existing `p` elements.
Now set the `src` attribute so that it points to this url:
`https://bit.ly/fcc-relaxing-cat`
Now set the `src` attribute so that it points to the url `https://bit.ly/fcc-relaxing-cat`
Finally, don't forget to give your `img` element an `alt` attribute with applicable text.

View File

@ -13,7 +13,9 @@ You can set a checkbox or radio button to be checked by default using the `check
To do this, just add the word `checked` to the inside of an input element. For example:
`<input type="radio" name="test-name" checked>`
```html
<input type="radio" name="test-name" checked>
```
# --instructions--

View File

@ -21,7 +21,9 @@ It is considered best practice to explicitly define the relationship between a c
Here's an example of a checkbox:
`<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>`
```html
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
```
# --instructions--

View File

@ -15,7 +15,9 @@ Now let's create a web form.
You can create a text input like this:
`<input type="text">`
```html
<input type="text">
```
Note that `input` elements are self-closing.

View File

@ -13,7 +13,9 @@ dashedName: inform-with-the-paragraph-element
You can create a paragraph element like this:
`<p>I'm a p tag!</p>`
```html
<p>I'm a p tag!</p>
```
# --instructions--

View File

@ -13,7 +13,9 @@ You can use `a` (*anchor*) elements to link to content outside of your web page.
`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:
`<a href="https://freecodecamp.org">this links to freecodecamp.org</a>`
```html
<a href="https://freecodecamp.org">this links to freecodecamp.org</a>
```
Then your browser will display the text `this links to freecodecamp.org` as a link you can click. And that link will take you to the web address `https://www.freecodecamp.org`.

View File

@ -19,19 +19,27 @@ You can nest links within other text elements.
Let's break down the example. Normal text is wrapped in the `p` element:
`<p> Here's a ... for you to follow. </p>`
```html
<p> Here's a ... for you to follow. </p>
```
Next is the *anchor* element `<a>` (which requires a closing tag `</a>`):
`<a> ... </a>`
```html
<a> ... </a>
```
`target` is an anchor tag attribute that specifies where to open the link. The value `_blank` specifies to open the link in a new tab. The `href` is an anchor tag attribute that contains the URL address of the link:
`<a href="http://freecodecamp.org"> ... </a>`
```html
<a href="http://freecodecamp.org"> ... </a>
```
The text, `link to freecodecamp.org`, within the `a` element is called <dfn>anchor text</dfn>, and will display the link to click:
`<a href=" ... ">link to freecodecamp.org</a>`
```html
<a href=" ... ">link to freecodecamp.org</a>
```
The final output of the example will look like this:

View File

@ -19,11 +19,15 @@ Most HTML elements have an opening tag and a closing tag.
Opening tags look like this:
`<h1>`
```html
<h1>
```
Closing tags look like this:
`</h1>`
```html
</h1>
```
The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.

View File

@ -13,7 +13,9 @@ You can make elements into links by nesting them within an `a` element.
Nest your image within an `a` element. Here's an example:
`<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>`
```html
<a href="#"><img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera."></a>
```
Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.