Hello World
+Hello Paragraph
+
+ +
input field, which can be used to create se
You may have noticed the text and submit input types in prior challenges, and HTML5 introduced an option to specify a date field. Depending on browser support, a date picker shows up in the input field when it's in focus, which makes filling in a form easier for all users.
For older browsers, the type will default to text, so it helps to show users the expected date format in the label or as placeholder text just in case.
Here's an example:
-<label for="input1">Enter a date:</label>+ +```html + + +``` + ## Instructions diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md index 35d0138a3b..4e8d0d54da 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.english.md @@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/c/cVJVkcZ' HTML5's
<input type="date" id="input1" name="input1">
audio element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
The audio tag supports the controls attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
Here's an example:
-<audio id="meowClip" controls>+ +```html + +``` + Note: Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them. diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md index cf2cd9ecc3..8145651d41 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.english.md @@ -10,7 +10,17 @@ videoUrl: 'https://scrimba.com/c/cGJMqtE' HTML5 introduced the
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
figure element, along with the related figcaption. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the figure.
For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
Here's an example - note that the figcaption goes inside the figure tags and can be combined with other elements:
-<figure>+ +```html +
<img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
<br>
<figcaption>
Master Camper Cat demonstrates proper form of a roundhouse kick.
</figcaption>
</figure>
+ label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.
You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a label element along with the label text in order to make the text clickable. Another way to achieve this is by using the for attribute as explained in this lesson.
The value of the for attribute must be the same as the value of the id attribute of the form control. Here's an example:
-<form>+ +```html + +``` + ## Instructions diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md index d255b3fc40..fa30e3d906 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.english.md @@ -10,7 +10,18 @@ videoUrl: 'https://scrimba.com/c/cJ8QGkhJ' Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect. However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window. Here's an example of the CSS rules that accomplish this: -
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</form>
.sr-only {+ +```css +.sr-only { + position: absolute; + left: -10000px; + width: 1px; + height: 1px; + top: auto; + overflow: hidden; +} +``` + Note: The following CSS approaches will NOT do the same thing:
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
top: auto;
overflow: hidden;
}
display: none; or visibility: hidden; hides content for everyone, including screen reader userssection and divsection element is also new with HTML5, and has a slightly different semantic meaning than article. An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article, then each chapter is a section. When there's no relationship between groups of content, then use a div.
-<div> - groups content+ +```html +
<section> - groups related content
<article> - groups independent, self-contained content
fieldset tag surrounds the entire grouping of radio buttons to achieve this. It often uses a legend tag to provide a description for the grouping, which is read by screen readers for each choice in the fieldset element.
The fieldset wrapper and legend tag are not necessary when the choices are self-explanatory, like a gender selection. Using a label with the for attribute for each radio button is sufficient.
Here's an example:
-<form>+ +```html + +``` + ## Instructions diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md index 9db23cb409..0dee4c9b15 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.english.md @@ -19,7 +19,11 @@ The
<fieldset>
<legend>Choose one of these three items:</legend>
<input id="one" type="radio" name="items" value="one">
<label for="one">Choice One</label><br>
<input id="two" type="radio" name="items" value="two">
<label for="two">Choice Two</label><br>
<input id="three" type="radio" name="items" value="three">
<label for="three">Choice Three</label>
</fieldset>
</form>
box-shadow property takes values for
The blur-radius and spread-radius values are optional.
Multiple box-shadows can be created by using commas to separate properties of each box-shadow element.
Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);+ +```css +box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); +``` + ## Instructions diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md index 71bd250387..a1828f27ba 100644 --- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.english.md @@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/cEDaDTN' ## Description
height property in CSS, similar to the width property. Here's an example that changes the height of an image to 20px:
-img {+ +```css +img { + height: 20px; +} +``` +
height: 20px;
}
:hover pseudo-class selector. Here's the CSS to change the color of the anchor tag to red during its hover state:
-a:hover {+ +```css +a:hover { + color: red; +} +``` +
color: red;
}
width property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
-img {+ +```css +img { + width: 220px; +} +``` +
width: 220px;
}
CSS Box Model. 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 normal flow of a document, but CSS offers the position property to override it.
When the position of an element is set to relative, it allows you to specify how CSS should move it relative to its current position in the normal flow of the page. It pairs with the CSS offset properties of left or right, and top or bottom. These say how many pixels, percentages, or ems to move the item away from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
-p {+ +```css +p { + position: relative; + bottom: 10px; +} +``` + Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position. Note: Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
position: relative;
bottom: 10px;
}
::before and ::after pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a ::before pseudo-element is used to add a rectangle to an element with the class heart:
-.heart::before {+ +```css +.heart::before { + content: ""; + background-color: yellow; + border-radius: 25%; + position: absolute; + height: 50px; + width: 70px; + top: -50px; + left: 5px; +} +``` + For the
content: "";
background-color: yellow;
border-radius: 25%;
position: absolute;
height: 50px;
width: 70px;
top: -50px;
left: 5px;
}
::before and ::after pseudo-elements to function properly, they must have a defined content property. This property is usually used to add things like a photo or text to the selected element. When the ::before and ::after pseudo-elements are used to make shapes, the content property is still required, but it's set to an empty string.
In the above example, the element with the class of heart has a ::before pseudo-element that produces a yellow rectangle with height and width of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left and 50px above the top of the element.
position, such as fixed or relative, the CSS offset properties right, left, top, and bottom can be used in animation rules to create movement.
As shown in the example below, you can push the item downwards then upwards by setting the top property of the 50% keyframe to 50px, but having it set to 0px for the first (0%) and the last (100%) keyframe.
-@keyframes rainbow {+ +```css +@keyframes rainbow { + 0% { + background-color: blue; + top: 0px; + } + 50% { + background-color: green; + top: 50px; + } + 100% { + background-color: yellow; + top: 0px; + } +} +``` +
0% {
background-color: blue;
top: 0px;
}
50% {
background-color: green;
top: 50px;
}
100% {
background-color: yellow;
top: 0px;
}
}
animation-name sets the name of the animation, which is later used by @keyframes to tell CSS which rules go with which animations.
animation-duration sets the length of time for the animation.
@keyframes is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes and the animation properties:
-#anim {+ +```css +#anim { + animation-name: colorful; + animation-duration: 3s; +} + +@keyframes colorful { + 0% { + background-color: blue; + } + 100% { + background-color: yellow; + } +} +``` + For the element with the
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
anim id, the code snippet above sets the animation-name to colorful and sets the animation-duration to 3 seconds. Then the @keyframes rule links to the animation properties with the name colorful. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
index 55f9572a46..954203c284 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.english.md
@@ -9,7 +9,24 @@ videoUrl: 'https://scrimba.com/c/cg4vZAa'
@keyframes to change the color of a button in its hover state.
Here's an example of changing the width of an image on hover:
-<style>+ +```html + + +
img:hover {
animation-name: width;
animation-duration: 500ms;
}
@keyframes width {
100% {
width: 40px;
}
}
</style>
<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.
The following code skews the paragraph element by -32 degrees along the X-axis.
-p {+ +```css +p { + transform: skewX(-32deg); +} +``` +
transform: skewX(-32deg);
}
transform property, along with its scale() function. The following code example doubles the size of all the paragraph elements on the page:
-p {+ +```css +p { + transform: scale(2); +} +``` +
transform: scale(2);
}
transform property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as :hover that specify a certain state of an element, the transform property can easily add interactivity to your elements.
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
-p:hover {+ +```css +p:hover { + transform: scale(2.1); +} +``` + Note: Applying a transform to a
transform: scale(2.1);
}
div element will also affect any child elements contained in the div.
style, color and width.
For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
-<style>+ +```html + +``` +
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
background: var(--penguin-skin, black);+ +```css +background: var(--penguin-skin, black); +``` + This will set background to black if your variable wasn't set. Note that this can be useful for debugging. diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.english.md index 25ec2cbb32..fbaf9aaf3d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.english.md +++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.english.md @@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/c3bvDc8' ## Description
font-size CSS property, like this:
-h1 {+ +```css +h1 { + font-size: 30px; +} +``` +
font-size: 30px;
}
name with two dashes in front of it and assign it a value like this:
---penguin-skin: gray;+ +```css +--penguin-skin: gray; +``` + This will create a variable named
--penguin-skin and assign it the value of gray.
Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
background-color property.
For example, if you wanted an element's background color to be green, you'd put this within your style element:
-.green-background {+ +```css +.green-background { + background-color: green; +} +``` +
background-color: green;
}
h1 element the id attribute of orange-
<h1 id="orange-text">
Leave the blue-text and pink-text classes on your h1 element.
Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like:
-#brown-text {
color: brown;
}
+
+```css
+#brown-text {
+ color: brown;
+}
+```
+
Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.english.md
index 09bf7b288e..35b0f88c83 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.english.md
@@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/c3bvpCg'
You can set which font an element should use, by using the font-family property.
For example, if you wanted to set your h2 element's font to sans-serif, you would use the following CSS:
-h2 {
font-family: sans-serif;
}
+
+```css
+h2 {
+ font-family: sans-serif;
+}
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md
index 073c109dbc..5916f2cf1b 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md
@@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cM9MmCP'
CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.
For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:
-<style>
.larger-image {
width: 500px;
}
</style>
+
+```html
+
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.english.md
index 8645d2f3a1..c7759c3edd 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.english.md
@@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cpVKBfQ'
There are several default fonts that are available in all browsers. These generic font families include monospace, serif and sans-serif
When one font isn't available, you can tell the browser to "degrade" to another font.
For example, if you wanted an element to use the Helvetica font, but degrade to the sans-serif font when Helvetica isn't available, you will specify it as follows:
-p {
font-family: Helvetica, sans-serif;
}
+
+```css
+p {
+ font-family: Helvetica, sans-serif;
+}
+```
+
Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.english.md
index 61182efd15..a2e3694b9a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.english.md
@@ -15,7 +15,13 @@ Every HTML page has a body element.
We can prove that the body element exists here by giving it a background-color of black.
We can do this by adding the following to our style element:
-body {
background-color: black;
}
+
+```css
+body {
+ background-color: black;
+}
+```
+
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.english.md
index 5af4286f0f..da2fc58e95 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.english.md
@@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/c2MvDtV'
Classes are reusable styles that can be added to HTML elements.
Here's an example CSS class declaration:
-<style>
.blue-text {
color: blue;
}
</style>
+
+```html
+
+```
+
You can see that we've created a CSS class called blue-text within the <style> tag.
You can apply a class to an HTML element like this:
<h2 class="blue-text">CatPhotoApp</h2>
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
index ea8d3a5c26..b619343c18 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.english.md
@@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/c/cM989ck'
## Description
After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
-background: var(--penguin-skin);
+
+```css
+background: var(--penguin-skin);
+```
+
This will change the background of whatever element you are targeting to gray because that is the value of the --penguin-skin variable.
Note that styles will not be applied unless the variable names are an exact match.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.english.md
index 776353ac80..7d855f84c1 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.english.md
@@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cakyZfL'
One cool thing about id attributes is that, like classes, you can style them using CSS.
However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.
Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:
-#cat-photo-element {
background-color: green;
}
+
+```css
+#cat-photo-element {
+ background-color: green;
+}
+```
+
Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.english.md
index 17e02ad300..4eea4dfdf4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.english.md
@@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/cnpymfJ'
You have been given id or class attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.
Let's bring out CatPhotoApp again to practice using CSS Selectors.
For this challenge, you will use the [attr=value] attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute type and a corresponding value of radio:
-[type='radio'] {
margin: 20px 0px 20px 0px;
}
+
+```css
+[type='radio'] {
+ margin: 20px 0px 20px 0px;
+}
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md
index 67e3c28e80..861be559cf 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.english.md
@@ -11,9 +11,22 @@ With CSS, there are hundreds of CSS properties that you can use to
When you entered <h2 style="color: red;">CatPhotoApp</h2>, you were styling that individual h2 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 style block like this:
-<style>
</style>
+
+```html
+
+```
+
Inside that style block, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, you would add a style rule that looks like this:
-<style>
h2 {color: red;}
</style>
+
+```html
+
+```
+
Note that it's important to have both opening and closing curly braces ({ and }) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md
index f1491b6b87..67062ecab7 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.english.md
@@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/c/c8W9mHM'
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 decimals, or base 10 numbers, which use the symbols 0 to 9 for each digit. Hexadecimals (or hex) 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 hexadecimal numbers here.
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, #000000 is black and is also the lowest possible value. You can find more information about the RGB color system here.
-body {
color: #000000;
}
+
+```css
+body {
+ color: #000000;
+}
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.english.md
index fdbdca320a..b9ff83b0af 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.english.md
@@ -15,7 +15,13 @@ The RGB value for white looks like this:
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.
If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So RGB, which starts counting from zero, has the exact same number of possible values as hex code.
Here's an example of how you'd change the body background to orange using its RGB code.
-body {
background-color: rgb(255, 165, 0);
}
+
+```css
+body {
+ background-color: rgb(255, 165, 0);
+}
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.english.md
index 4f83b49ae1..1bc7ecafef 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.english.md
@@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
HTML has a special element for creating unordered lists, or bullet point style lists.
Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>
For example:
-<ul>
<li>milk</li>
<li>cheese</li>
</ul>
+
+```html
+
+ - milk
+ - cheese
+
+```
+
would create a bullet point style list of "milk" and "cheese".
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.english.md
index 02bffb67d0..3926a2125a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.english.md
@@ -12,9 +12,21 @@ Radio buttons are a type of input.
Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.
All related radio buttons should have the same name 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.
Here's an example of a radio button:
-<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>
+
+```html
+
+```
+
It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:
-<label for="indoor">
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
+
+```html
+
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.english.md
index e13ba6861d..d4df32b9b6 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.english.md
@@ -11,7 +11,14 @@ HTML has another special element for creating ordered lists, or num
Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists are closed with the </ol> tag.
For example:
-<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>
+
+```html
+
+ - Garfield
+ - Sylvester
+
+```
+
would create a numbered list of "Garfield" and "Sylvester".
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.english.md
index e6ec1cd2b2..80a6cf3a2a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.english.md
@@ -13,7 +13,14 @@ You tell the browser this information by adding the <!DOCTYPE ...>! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.
Next, the rest of your HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.
Here's an example of the page structure:
-<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
+
+```html
+
+
+
+
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.english.md
index 8c8477506a..df88b116ef 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.english.md
@@ -10,7 +10,19 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
You can add another level of organization in your HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.
Metadata elements, such as link, meta, title, and style, typically go inside the head element.
Here's an example of a page's layout:
-<!DOCTYPE html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page contents -->
</body>
</html>
+
+```html
+
+
+
+
+
+
+
+
+
+```
+
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
index 455a7eb26a..6d23033852 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.english.md
@@ -10,7 +10,14 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section and others.
These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The main HTML5 tag helps search engines and other developers find the main content of your page.
Example usage, a main element with two child elements nested inside it:
-<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>
+
+```html
+
+ Hello World
+ Hello Paragraph
+
+```
+
Note: Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.english.md
index f4e3644bc6..9507fe89df 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.english.md
@@ -10,7 +10,13 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.
To create an internal link, you assign a link's href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.
Below is an example of an internal anchor link and its target element:
-<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
+
+```html
+Contacts
+...
+Contacts
+```
+
When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md
index dbcf1bdb4f..4c7b6c5981 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.english.md
@@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/cb6k8Cb'
## Description
You can nest links within other text elements.
-<p>
Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
</p>
+
+```html
+
+ Here's a link to freecodecamp.org for you to follow.
+
+```
+
Let's break down the example:
Normal text is wrapped in the p element:
<p> Here's a ... for you to follow. </p>
Next is the anchor element <a> (which requires a closing tag </a>):
<a> ... </a>
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.english.md
index f3f5194468..6e3fcf1d18 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.english.md
@@ -9,10 +9,16 @@ challengeType: 0
When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type radio and checkbox report their values from the value attribute.
For example:
-
-<label for="indoor">
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
</label>
-<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
-
+
+```html
+
+
+```
+
Here, you have two radio inputs. When the user submits the form with the indoor option selected, the form data will include the line: indoor-outdoor=indoor. This is from the name and value attributes of the "indoor" input.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
index 63a9a85c23..7fa12a45b3 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.english.md
@@ -8,7 +8,14 @@ videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
## Description
Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the grid-template-columns property on a grid container as demonstrated below:
-.container {
display: grid;
grid-template-columns: 50px 50px;
}
+
+```css
+.container {
+ display: grid;
+ grid-template-columns: 50px 50px;
+}
+```
+
This will give your grid two columns that are each 50px wide.
The number of parameters given to the grid-template-columns property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
index 7349b3b2a2..2ce56e90a6 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.english.md
@@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
## Description
So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the grid-column-gap property like this:
-grid-column-gap: 10px;
+
+```css
+grid-column-gap: 10px;
+```
+
This creates 10px of empty space between all of our columns.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
index 696552f5b2..d99632dae0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.english.md
@@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
## Description
The repeat function comes with an option called auto-fill. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining auto-fill with minmax, like this:
-repeat(auto-fill, minmax(60px, 1fr));
+
+```css
+repeat(auto-fill, minmax(60px, 1fr));
+```
+
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
Note: If your container can't fit all your items on one row, it will move them down to a new one.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
index 68866e84b6..7e7bf2bc70 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.english.md
@@ -8,7 +8,14 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
## Description
You can group cells of your grid together into an area and give the area a custom name. Do this by using grid-template-areas on the container like this:
-grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
+
+```css
+grid-template-areas:
+ "header header header"
+ "advert content content"
+ "footer footer footer";
+```
+
The code above merges the top three cells together into an area named header, the bottom three cells into a footer area, and it makes two areas in the middle row; advert and content.
Note: Every word in the code represents a cell and every pair of quotation marks represent a row.
In addition to custom labels, you can use a period (.) to designate an empty cell in the grid.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
index e989e65fed..f28f0291c2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.english.md
@@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
## Description
There's another built-in function to use with grid-template-columns and grid-template-rows called minmax. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
-grid-template-columns: 100px minmax(50px, 200px);
+
+```css
+grid-template-columns: 100px minmax(50px, 200px);
+```
+
In the code above, grid-template-columns is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
index a78f126132..9da10a1b37 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.english.md
@@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
## Description
After creating an area's template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the grid-area property on an item like this:
-.item1 { grid-area: header; }
+
+```css
+.item1 {
+ grid-area: header;
+}
+```
+
This lets the grid know that you want the item1 class to go in the area named header. In this case, the item will use the entire top row because that whole row is named as the header area.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
index c108675621..42e2b7607a 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.english.md
@@ -10,11 +10,23 @@ videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
When you used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created.
Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
Here's an example that would create the 100 row grid, each row at 50px tall.
-grid-template-rows: repeat(100, 50px);
+
+```css
+grid-template-rows: repeat(100, 50px);
+```
+
You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like:
-grid-template-columns: repeat(2, 1fr 50px) 20px;
+
+```css
+grid-template-columns: repeat(2, 1fr 50px) 20px;
+```
+
This translates to:
-grid-template-columns: 1fr 50px 1fr 50px 20px;
+
+```css
+grid-template-columns: 1fr 50px 1fr 50px 20px;
+```
+
Note: The 1fr 50px is repeated twice followed by 20px.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
index e6907dfe3d..2060724fd5 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.english.md
@@ -12,7 +12,11 @@ You can use absolute and relative units like px and em
auto: sets the column or row to the width or height of its content automatically,
%: adjusts the column or row to the percent width of its container.
Here's the code that generates the output in the preview:
-grid-template-columns: auto 50px 10% 2fr 1fr;
+
+```css
+grid-template-columns: auto 50px 10% 2fr 1fr;
+```
+
This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
index 6217f10de9..d7829ab101 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.english.md
@@ -8,9 +8,17 @@ videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
## Description
The grid-area property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
-item1 { grid-area: 1/1/2/4; }
+
+```css
+item1 { grid-area: 1/1/2/4; }
+```
+
This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:
-grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
+
+```css
+grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
+```
+
So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
index a7029fb3f4..003e016fc0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md
@@ -13,7 +13,11 @@ This is what the lines look like for a 3x3 grid:
column lines
1
2
3
4
row lines
1
2
3
4
To control the amount of columns an item will consume, you can use the grid-column property in conjunction with the line numbers you want the item to start and stop at.
Here's an example:
-grid-column: 1 / 3;
+
+```css
+grid-column: 1 / 3;
+```
+
This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md
index 889c85f6b4..06ba483be9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.english.md
@@ -10,7 +10,15 @@ videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:
img { width: 720px; }
You can use:
-img {
max-width: 100%;
display: block;
height: auto;
}
+
+```css
+img {
+ max-width: 100%;
+ display: block;
+ height: auto;
+}
+```
+
The max-width property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the display property to block changes the image from an inline element (its default), to a block element on its own line. The height property of auto keeps the original aspect ratio of the image.
diff --git a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
index 908e83cdac..2f8894a417 100644
--- a/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.english.md
@@ -11,7 +11,14 @@ With the increase of internet connected devices, their sizes and specifications
The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their width and height values as only half of what the original file is.
Here is an example of an image that is only using half of the original height and width:
-<style>
img { height: 250px; width: 250px; }
</style>
<img src="coolPic500x500" alt="A most excellent picture">
+
+```html
+
+
+```
+
## Instructions