From b064991667f2a54ce98aed47633279a5e8ccff70 Mon Sep 17 00:00:00 2001
From: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Date: Fri, 19 Mar 2021 00:24:09 +0100
Subject: [PATCH] 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)
---
...images-for-visually-impaired-accessibility.md | 4 +++-
.../know-when-alt-text-should-be-left-blank.md | 4 +++-
...make-links-navigable-with-html-access-keys.md | 4 +++-
...ze-times-with-the-html5-datetime-attribute.md | 4 +++-
...bindex-to-add-keyboard-focus-to-an-element.md | 4 +++-
...der-of-keyboard-focus-for-several-elements.md | 8 ++++++--
...tinually-using-an-infinite-animation-count.md | 4 +++-
.../create-a-gradual-css-linear-gradient.md | 8 ++++++--
.../learn-how-bezier-curves-work.md | 4 +++-
...e-motion-more-natural-using-a-bezier-curve.md | 4 +++-
.../modify-fill-mode-of-an-animation.md | 4 +++-
.../use-a-bezier-curve-to-move-a-graphic.md | 4 +++-
...inear-gradient-to-create-a-striped-element.md | 4 +++-
.../add-borders-around-your-elements.md | 4 +++-
.../basic-css/change-the-color-of-text.md | 4 +++-
.../basic-css/import-a-google-font.md | 4 +++-
...erride-all-other-styles-by-using-important.md | 4 +++-
...lass-declarations-by-styling-id-attributes.md | 4 +++-
...ride-class-declarations-with-inline-styles.md | 4 +++-
.../override-styles-in-subsequent-css.md | 4 +++-
.../basic-css/set-the-id-of-an-element.md | 4 +++-
...tation-to-specify-the-margin-of-an-element.md | 4 +++-
...ation-to-specify-the-padding-of-an-element.md | 4 +++-
.../use-rgb-values-to-color-elements.md | 8 ++++++--
.../add-a-submit-button-to-a-form.md | 4 +++-
.../add-images-to-your-website.md | 12 +++++++-----
...ck-radio-buttons-and-checkboxes-by-default.md | 4 +++-
.../create-a-set-of-checkboxes.md | 4 +++-
.../basic-html-and-html5/create-a-text-field.md | 4 +++-
.../inform-with-the-paragraph-element.md | 4 +++-
...ink-to-external-pages-with-anchor-elements.md | 4 +++-
.../nest-an-anchor-element-within-a-paragraph.md | 16 ++++++++++++----
.../say-hello-to-html-elements.md | 8 ++++++--
.../turn-an-image-into-a-link.md | 4 +++-
.../create-a-media-query.md | 8 ++++++--
.../make-typography-responsive.md | 4 +++-
36 files changed, 136 insertions(+), 48 deletions(-)
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
index 54afc2d58d..7688867e31 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
@@ -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:
-``
+```html
+
+```
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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
index 63febf5889..695445ea37 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
@@ -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:
-``
+```html
+
+```
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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
index 66a846fa87..644de11696 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
@@ -15,7 +15,9 @@ HTML5 allows this attribute to be used on any element, but it's particularly use
Here's an example:
-``
+```html
+
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
index 46543fcecd..b7523574eb 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
@@ -13,7 +13,9 @@ Continuing with the date theme, HTML5 also introduced the `time` element along w
Here's an example:
-`
Master Camper Cat officiated the cage match between Goro and Scorpion , which ended in a draw.
`
+```html
+
Master Camper Cat officiated the cage match between Goro and Scorpion , which ended in a draw.
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
index e3dec48008..0ae730fc94 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
@@ -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:
-`
I need keyboard focus!
`
+```html
+
I need keyboard focus!
+```
**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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
index bd03492e56..31c79bbda2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
@@ -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:
-`
I get keyboard focus, and I get it first!
`
+```html
+
I get keyboard focus, and I get it first!
+```
-`
I get keyboard focus, and I get it second!
`
+```html
+
I get keyboard focus, and I get it second!
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
index c5eddca536..f3280fddbc 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
@@ -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`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
index 491a708b38..35787cfba3 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
@@ -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--
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
index a391aaa057..14f512c553 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
index e59b400b55..85932dd7b3 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
index bd8e1bb7e3..ec59324e6d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
@@ -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--
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
index 443e5660dd..63d9325115 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
index 2c5e008892..60907efc65 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
index 035a03a5e5..d8cd9ce2f3 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
@@ -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:
-``
+```html
+
+```
# --hints--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
index 652f4ac5e7..cb1529dddb 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
@@ -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:
-`
CatPhotoApp
`
+```html
+
CatPhotoApp
+```
Note that it is a good practice to end inline `style` declarations with a `;` .
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md
index a82471bdab..aa9055cc65 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md
@@ -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):
-``
+```html
+
+```
Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
index 396fbb3535..4c4c24d79d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
@@ -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--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
index fd8c13fe38..5ab79faf82 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
@@ -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:
-`
`
+```html
+
+```
Leave the `blue-text` and `pink-text` classes on your `h1` element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
index 6bdc4a5d6e..d56ccaa2e1 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -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:
-`
`
+```html
+
+```
Leave the `blue-text` and `pink-text` classes on your `h1` element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
index 82c0ac797d..55ccdf3c48 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
index 10f6f16785..933ce15b19 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -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`:
-`
`
+```html
+
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
index d3d738afa4..00c60af541 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
index 2382567a13..569d65f3b9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
index a7e9f64c88..9f6b4abcd4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
index 49ce2e73e3..4a9b8baa5d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
@@ -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:
-``
+```html
+
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
index 96eb0c7a80..83683e4fe5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -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:
-``
+```html
+
+```
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:
-``
+```html
+
+```
# --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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
index 1e3ec90f2e..04ff2f1f04 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
@@ -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:
-``
+```html
+
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
index 22ea725ff1..32498ada5e 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
@@ -21,7 +21,9 @@ It is considered best practice to explicitly define the relationship between a c
Here's an example of a checkbox:
-``
+```html
+
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
index a0bea66713..c2be68f875 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -15,7 +15,9 @@ Now let's create a web form.
You can create a text input like this:
-``
+```html
+
+```
Note that `input` elements are self-closing.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
index 09bde50db6..d07f3dec73 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
@@ -13,7 +13,9 @@ dashedName: inform-with-the-paragraph-element
You can create a paragraph element like this:
-`
I'm a p tag!
`
+```html
+
I'm a p tag!
+```
# --instructions--
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
index eeeb1d916a..4ae41218cb 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
@@ -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:
-`this links to freecodecamp.org`
+```html
+this links to freecodecamp.org
+```
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`.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
index 7ff58f71e7..4f1543285e 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -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:
-`
Here's a ... for you to follow.
`
+```html
+
Here's a ... for you to follow.
+```
Next is the *anchor* element `` (which requires a closing tag ``):
-` ... `
+```html
+ ...
+```
`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:
-` ... `
+```html
+ ...
+```
The text, `link to freecodecamp.org`, within the `a` element is called anchor text, and will display the link to click:
-`link to freecodecamp.org`
+```html
+link to freecodecamp.org
+```
The final output of the example will look like this:
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
index 11c156f71a..ce73f22e1b 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
@@ -19,11 +19,15 @@ Most HTML elements have an opening tag and a closing tag.
Opening tags look like this:
-`
`
+```html
+
+```
Closing tags look like this:
-`
`
+```html
+
+```
The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
index 018d9ac154..a02a0890f5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
@@ -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:
-``
+```html
+
+```
Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
index 919f58a44e..f4069660d4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
@@ -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.
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
index d00a4c0466..16dbc96023 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
@@ -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--
`
+```html
+
`
+```html
+
`
+```html
+