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
GitHub
@ -11,7 +11,9 @@ dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
|
||||
|
||||
You've likely seen an `alt` attribute on an `img` tag in other challenges. `alt` text describes the image's content and provides a text-alternative for it. An `alt` attribute helps in cases where the image fails to load or can't be seen by a user. Search engines also use it to understand what an image contains to include it in search results. Here's an example:
|
||||
|
||||
`<img src="importantLogo.jpeg" alt="Company logo">`
|
||||
```html
|
||||
<img src="importantLogo.jpeg" alt="Company logo">
|
||||
```
|
||||
|
||||
People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the `alt` attribute and read its contents to deliver key information.
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ In the last challenge, you learned that including an `alt` attribute when using
|
||||
|
||||
When an image is already explained with text content or does not add meaning to a page, the `img` still needs an `alt` attribute, but it can be set to an empty string. Here's an example:
|
||||
|
||||
`<img src="visualDecoration.jpeg" alt="">`
|
||||
```html
|
||||
<img src="visualDecoration.jpeg" alt="">
|
||||
```
|
||||
|
||||
Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ HTML5 allows this attribute to be used on any element, but it's particularly use
|
||||
|
||||
Here's an example:
|
||||
|
||||
`<button accesskey="b">Important Button</button>`
|
||||
```html
|
||||
<button accesskey="b">Important Button</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Continuing with the date theme, HTML5 also introduced the `time` element along w
|
||||
|
||||
Here's an example:
|
||||
|
||||
`<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>`
|
||||
```html
|
||||
<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ The HTML `tabindex` attribute has three distinct functions relating to an elemen
|
||||
|
||||
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as `div`, `span`, and `p`, by placing a `tabindex="0"` attribute on them. Here's an example:
|
||||
|
||||
`<div tabindex="0">I need keyboard focus!</div>`
|
||||
```html
|
||||
<div tabindex="0">I need keyboard focus!</div>
|
||||
```
|
||||
|
||||
**Note:** A negative `tabindex` value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a `div` used for a pop-up window is activated), and is beyond the scope of these challenges.
|
||||
|
||||
|
||||
@ -17,9 +17,13 @@ It's important to note that when the tab order is set this way, it overrides the
|
||||
|
||||
Here's an example:
|
||||
|
||||
`<div tabindex="1">I get keyboard focus, and I get it first!</div>`
|
||||
```html
|
||||
<div tabindex="1">I get keyboard focus, and I get it first!</div>
|
||||
```
|
||||
|
||||
`<div tabindex="2">I get keyboard focus, and I get it second!</div>`
|
||||
```html
|
||||
<div tabindex="2">I get keyboard focus, and I get it second!</div>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
|
||||
The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example:
|
||||
|
||||
`animation-iteration-count: 3;`
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
|
||||
|
||||
|
||||
@ -11,13 +11,17 @@ dashedName: create-a-gradual-css-linear-gradient
|
||||
|
||||
Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the `background` property's `linear-gradient()` function. Here is the general syntax:
|
||||
|
||||
`background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);`
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
|
||||
|
||||
Example:
|
||||
|
||||
`background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));`
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ In CSS animations, Bezier curves are used with the `cubic-bezier` function. The
|
||||
|
||||
The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code:
|
||||
|
||||
`animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed.
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ The `animation-timing-function` automatically loops at every keyframe when the `
|
||||
|
||||
The following cubic Bezier curve simulates a juggling movement:
|
||||
|
||||
`cubic-bezier(0.3, 0.4, 0.5, 1.6);`
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ That's great, but it doesn't work right yet. Notice how the animation resets aft
|
||||
|
||||
This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so:
|
||||
|
||||
`animation-fill-mode: forwards;`
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ A previous challenge discussed the `ease-out` keyword that describes an animatio
|
||||
|
||||
In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:
|
||||
|
||||
`animation-timing-function: cubic-bezier(0, 0, 0.58, 1);`
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
Remember that all `cubic-bezier` functions start with `p0` at (0, 0) and end with `p3` at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to `p1` y value of 0, then goes to `p2` y value of 1) than it moves through the X-axis (0 to start, then 0 for `p1`, up to 0.58 for `p2`). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ In the example demonstrated in the code editor, the gradient starts with the col
|
||||
|
||||
For this example, it helps to think about the color stops as pairs where every two colors blend together.
|
||||
|
||||
`0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px`
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.
|
||||
|
||||
|
||||
@ -29,7 +29,9 @@ Create a class called `thick-green-border`. This class should add a 10px, solid,
|
||||
|
||||
Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example:
|
||||
|
||||
`<img class="class1 class2">`
|
||||
```html
|
||||
<img class="class1 class2">
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ The property that is responsible for the color of an element's text is the `colo
|
||||
|
||||
Here's how you would set your `h2` element's text color to blue:
|
||||
|
||||
`<h2 style="color: blue;">CatPhotoApp</h2>`
|
||||
```html
|
||||
<h2 style="color: blue;">CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
Note that it is a good practice to end inline `style` declarations with a `;` .
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ So, let's go ahead and import and apply a Google font (note that if Google is bl
|
||||
|
||||
To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
|
||||
|
||||
`<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">`
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
```
|
||||
|
||||
Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
|
||||
|
||||
|
||||
@ -23,7 +23,9 @@ Let's add the keyword `!important` to your pink-text element's color declaration
|
||||
|
||||
An example of how to do this is:
|
||||
|
||||
`color: red !important;`
|
||||
```css
|
||||
color: red !important;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -19,7 +19,9 @@ Let's override your `pink-text` and `blue-text` classes, and make your `h1` elem
|
||||
|
||||
Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this:
|
||||
|
||||
`<h1 id="orange-text">`
|
||||
```html
|
||||
<h1 id="orange-text">
|
||||
```
|
||||
|
||||
Leave the `blue-text` and `pink-text` classes on your `h1` element.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ There are other ways that you can override CSS. Do you remember inline styles?
|
||||
|
||||
Use an inline style to try to make our `h1` element white. Remember, in line styles look like this:
|
||||
|
||||
`<h1 style="color: green;">`
|
||||
```html
|
||||
<h1 style="color: green;">
|
||||
```
|
||||
|
||||
Leave the `blue-text` and `pink-text` classes on your `h1` element.
|
||||
|
||||
|
||||
@ -21,7 +21,9 @@ Apply the `blue-text` class to your `h1` element in addition to your `pink-text`
|
||||
|
||||
Applying multiple class attributes to a HTML element is done with a space between them like this:
|
||||
|
||||
`class="class1 class2"`
|
||||
```html
|
||||
class="class1 class2"
|
||||
```
|
||||
|
||||
**Note:** It doesn't matter which order the classes are listed in the HTML element.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ There are several benefits to using `id` attributes: You can use an `id` to styl
|
||||
|
||||
Here's an example of how you give your `h2` element the id of `cat-photo-app`:
|
||||
|
||||
`<h2 id="cat-photo-app">`
|
||||
```html
|
||||
<h2 id="cat-photo-app">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -13,7 +13,9 @@ Let's try this again, but with `margin` this time.
|
||||
|
||||
Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this:
|
||||
|
||||
`margin: 10px 20px 10px 20px;`
|
||||
```css
|
||||
margin: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
|
||||
|
||||
Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this:
|
||||
|
||||
`padding: 10px 20px 10px 20px;`
|
||||
```css
|
||||
padding: 10px 20px 10px 20px;
|
||||
```
|
||||
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
|
||||
|
||||
|
||||
@ -13,11 +13,15 @@ Another way you can represent colors in CSS is by using `RGB` values.
|
||||
|
||||
The `RGB` value for black looks like this:
|
||||
|
||||
`rgb(0, 0, 0)`
|
||||
```css
|
||||
rgb(0, 0, 0)
|
||||
```
|
||||
|
||||
The `RGB` value for white looks like this:
|
||||
|
||||
`rgb(255, 255, 255)`
|
||||
```css
|
||||
rgb(255, 255, 255)
|
||||
```
|
||||
|
||||
Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255.
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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--
|
||||
|
||||
|
||||
@ -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`.
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
@ -15,11 +15,15 @@ Media Queries consist of a media type, and if that media type matches the type o
|
||||
|
||||
Here's an example of a media query that returns the content when the device's width is less than or equal to 100px:
|
||||
|
||||
`@media (max-width: 100px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (max-width: 100px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
and the following media query returns the content when the device's height is more than or equal to 350px:
|
||||
|
||||
`@media (min-height: 350px) { /* CSS Rules */ }`
|
||||
```css
|
||||
@media (min-height: 350px) { /* CSS Rules */ }
|
||||
```
|
||||
|
||||
Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.
|
||||
|
||||
|
||||
@ -17,7 +17,9 @@ The four different viewport units are:
|
||||
|
||||
Here is an example that sets a `body` tag to 30% of the viewport's width.
|
||||
|
||||
`body { width: 30vw; }`
|
||||
```css
|
||||
body { width: 30vw; }
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
Reference in New Issue
Block a user