fix(curriculum): Convert blockquote elements to triple backtick syntax for Responsive Web Design (#35993)

* fix: converted blockquotes to code fences

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.english.md

@@ -11,7 +11,12 @@ Forms often include the <code>input</code> field, which can be used to create se
 You may have noticed the <code>text</code> and <code>submit</code> input types in prior challenges, and HTML5 introduced an option to specify a <code>date</code> field. Depending on browser support, a date picker shows up in the <code>input</code> field when it's in focus, which makes filling in a form easier for all users.
 For older browsers, the type will default to <code>text</code>, so it helps to show users the expected date format in the label or as placeholder text just in case.
 Here's an example:
-<blockquote>&lt;label for=&quot;input1&quot;&gt;Enter a date:&lt;/label&gt;<br>&lt;input type=&quot;date&quot; id=&quot;input1&quot; name=&quot;input1&quot;&gt;<br></blockquote>
+
+```html
+<label for="input1">Enter a date:</label>
+<input type="date" id="input1" name="input1">
+```
+
 </section>
 
 ## Instructions

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 <code>audio</code> 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 <code>audio</code> tag supports the <code>controls</code> 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:
-<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote>
+
+```html
+<audio id="meowClip" controls>
+  <source src="audio/meow.mp3" type="audio/mpeg" />
+  <source src="audio/meow.ogg" type="audio/ogg" />
+</audio>
+```
+
 <strong>Note:</strong> 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.
 </section>
 

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 <code>figure</code> element, along with the related <code>figcaption</code>. 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 <code>figure</code>.
 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 <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:
-<blockquote>&lt;figure&gt;<br>&nbsp;&nbsp;&lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br>&nbsp;&nbsp;&lt;br&gt;<br>&nbsp;&nbsp;&lt;figcaption&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;Master Camper Cat demonstrates proper form of a roundhouse kick.<br>&nbsp;&nbsp;&lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote>
+
+```html
+<figure>
+  <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>
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.english.md

@@ -11,7 +11,14 @@ Improving accessibility with semantic HTML markup applies to using both appropri
 The <code>label</code> 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 <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> 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 <code>label</code> element along with the label text in order to make the text clickable. Another way to achieve this is by using the <code>for</code> attribute as explained in this lesson.
 The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:
-<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br>&nbsp;&nbsp;&lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote>
+
+```html
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name">
+</form>
+```
+
 </section>
 
 ## Instructions

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:
-<blockquote>.sr-only {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: -10000px;<br>&nbsp;&nbsp;width: 1px;<br>&nbsp;&nbsp;height: 1px;<br>&nbsp;&nbsp;top: auto;<br>&nbsp;&nbsp;overflow: hidden;<br>}</blockquote>
+
+```css
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  top: auto;
+  overflow: hidden;
+}
+```
+
 <strong>Note:</strong> The following CSS approaches will NOT do the same thing:
 <ul>
 <li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.english.md

@@ -11,7 +11,13 @@ videoUrl: 'https://scrimba.com/c/cPp79S3'
 Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?
 Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.
 <strong>Note about <code>section</code> and <code>div</code></strong><br>The <code>section</code> element is also new with HTML5, and has a slightly different semantic meaning than <code>article</code>. An <code>article</code> is for standalone content, and a <code>section</code> is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the <code>article</code>, then each chapter is a <code>section</code>. When there's no relationship between groups of content, then use a <code>div</code>.
-<blockquote>&lt;div&gt; - groups content<br>&lt;section&gt; - groups related content<br>&lt;article&gt; - groups independent, self-contained content<br></blockquote>
+
+```html
+<div> - groups content
+<section> - groups related content
+<article> - groups independent, self-contained content
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.english.md

@@ -11,7 +11,21 @@ The next form topic covers accessibility of radio buttons. Each choice is given
 The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.
 The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.
 Here's an example:
-<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;fieldset&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br>&nbsp;&nbsp;&lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote>
+
+```html
+<form>
+  <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>
+```
+
 </section>
 
 ## Instructions

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 <code>box-shadow</code> property takes values for
 The <code>blur-radius</code> and <code>spread-radius</code> values are optional.
 Multiple box-shadows can be created by using commas to separate properties of each <code>box-shadow</code> element.
 Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
-<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>
+
+```css
+box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+```
+
 </section>
 
 ## Instructions

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
 <section id='description'>
 You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:
-<blockquote>img {<br>&nbsp;&nbsp;height: 20px;<br>}</blockquote>
+
+```css
+img {
+  height: 20px;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.english.md

@@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cakRGcm'
 <section id='description'>
 This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
 For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:
-<blockquote>a:hover {<br>&nbsp;&nbsp;color: red;<br>}</blockquote>
+
+```css
+a:hover {
+  color: red;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.english.md

@@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/cvVLPtN'
 ## Description
 <section id='description'>
 You can specify the width of an element using the <code>width</code> 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:
-<blockquote>img {<br>&nbsp;&nbsp;width: 220px;<br>}</blockquote>
+
+```css
+img {
+  width: 220px;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md

@@ -9,7 +9,14 @@ videoUrl: 'https://scrimba.com/c/czVmMtZ'
 <section id='description'>
 CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.
 When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
-<blockquote>p {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;bottom: 10px;<br>}</blockquote>
+
+```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.
 <strong>Note:</strong> 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.
 </section>

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.english.md

@@ -8,7 +8,20 @@ videoUrl: 'https://scrimba.com/c/cPpz4fr'
 ## Description
 <section id='description'>
 One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the <code>::before</code> and <code>::after</code> pseudo-elements. These pseudo-elements are used to add something before or after a selected element. In the following example, a <code>::before</code> pseudo-element is used to add a rectangle to an element with the class <code>heart</code>:
-<blockquote>.heart::before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>
+
+```css
+.heart::before {
+  content: "";
+  background-color: yellow;
+  border-radius: 25%;
+  position: absolute;
+  height: 50px;
+  width: 70px;
+  top: -50px;
+  left: 5px;
+}
+```
+
 For the <code>::before</code> and <code>::after</code> pseudo-elements to function properly, they must have a defined <code>content</code> property. This property is usually used to add things like a photo or text to the selected element. When the <code>::before</code> and <code>::after</code> pseudo-elements are used to make shapes, the <code>content</code> property is still required, but it's set to an empty string.
 In the above example, the element with the class of <code>heart</code> has a <code>::before</code> pseudo-element that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.
 </section>

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.english.md

@@ -9,7 +9,24 @@ videoUrl: 'https://scrimba.com/c/c7amZfW'
 <section id='description'>
 When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> 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 <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.
-<blockquote>@keyframes rainbow {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: green;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>}</blockquote>
+
+```css
+@keyframes rainbow {
+  0% {
+    background-color: blue;
+    top: 0px;
+  }
+  50% {
+    background-color: green;
+    top: 50px;
+  }
+  100% {
+    background-color: yellow;
+    top: 0px;
+  }
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.english.md

@@ -11,7 +11,23 @@ To animate an element, you need to know about the animation properties and the <
 <code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.
 <code>animation-duration</code> sets the length of time for the animation.
 <code>@keyframes</code> 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 <code>@keyframes</code> and the animation properties:
-<blockquote>#anim {<br>&nbsp;&nbsp;animation-name: colorful;<br>&nbsp;&nbsp;animation-duration: 3s;<br>}<br>@keyframes colorful {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;}<br>}</blockquote>
+
+```css
+#anim {
+  animation-name: colorful;
+  animation-duration: 3s;
+}
+
+@keyframes colorful {
+  0% {
+    background-color: blue;
+  }
+  100% {
+    background-color: yellow;
+  }
+}
+```
+
 For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. 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%.
 </section>
 

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'
 <section id='description'>
 You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.
 Here's an example of changing the width of an image on hover:
-<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img:hover {<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-name: width;<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-duration: 500ms;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;@keyframes width {<br>&nbsp;&nbsp;&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 40px;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&lt;/style&gt;<br><br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>
+
+```html
+<style>
+  img:hover {
+    animation-name: width;
+    animation-duration: 500ms;
+  }
+
+  @keyframes width {
+    100% {
+      width: 40px;
+    }
+  }
+</style>
+
+<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.english.md

@@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cyLP8Sr'
 <section id='description'>
 The next function of the <code>transform</code> property is <code>skewX()</code>, 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.
-<blockquote>p {<br>&nbsp;&nbsp;transform: skewX(-32deg);<br>}</blockquote>
+
+```css
+p {
+  transform: skewX(-32deg);
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.english.md

@@ -8,7 +8,13 @@ videoUrl: 'https://scrimba.com/c/c2MZVSg'
 ## Description
 <section id='description'>
 To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:
-<blockquote>p {<br>&nbsp;&nbsp;transform: scale(2);<br>}</blockquote>
+
+```css
+p {
+  transform: scale(2);
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md

@@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cyLPJuM'
 <section id='description'>
 The <code>transform</code> property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> 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:
-<blockquote>p:hover {<br>&nbsp;&nbsp;transform: scale(2.1);<br>}</blockquote>
+
+```css
+p:hover {
+  transform: scale(2.1);
+}
+```
+
 
   <strong>Note:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
 </section>

curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.english.md

@@ -9,7 +9,17 @@ videoUrl: 'https://scrimba.com/c/c2MvnHZ'
 <section id='description'>
 CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.
 For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>
+
+```html
+<style>
+  .thin-red-border {
+    border-color: red;
+    border-width: 5px;
+    border-style: solid;
+  }
+</style>
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.english.md

@@ -10,7 +10,11 @@ videoUrl: 'https://scrimba.com/c/c6bDNfp'
 When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
 <strong>Note:</strong> This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
 Here's how you do it:
-<blockquote>background: var(--penguin-skin, black);</blockquote>
+
+```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.
 </section>

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
 <section id='description'>
 Font size is controlled by the <code>font-size</code> CSS property, like this:
-<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>
+
+```css
+h1 {
+  font-size: 30px;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.english.md

@@ -8,7 +8,11 @@ videoUrl: 'https://scrimba.com/c/cQd27Hr'
 ## Description
 <section id='description'>
 To create a CSS Variable, you just need to give it a <code>name</code> with <code>two dashes</code> in front of it and assign it a <code>value</code> like this:
-<blockquote>--penguin-skin: gray;</blockquote>
+
+```css
+--penguin-skin: gray;
+```
+
 This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.
 Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
 </section>

curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.english.md

@@ -9,7 +9,13 @@ videoUrl: 'https://scrimba.com/c/cdRKMCk'
 <section id='description'>
 You can set an element's background color with the <code>background-color</code> property.
 For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:
-<blockquote>.green-background {<br>&nbsp;&nbsp;background-color: green;<br>}</blockquote>
+
+```css
+.green-background {
+  background-color: green;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md

@@ -18,7 +18,13 @@ Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-
 <code>&#60;h1 id="orange-text"&#62;</code>
 Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.
 Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:
-<blockquote>#brown-text {<br>&nbsp;&nbsp;color: brown;<br>}</blockquote>
+
+```css
+#brown-text {
+  color: brown;
+}
+```
+
 <strong>Note:</strong> It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
 </section>
 

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'
 <section id='description'>
 You can set which font an element should use, by using the <code>font-family</code> property.
 For example, if you wanted to set your <code>h2</code> element's font to <code>sans-serif</code>, you would use the following CSS:
-<blockquote>h2 {<br>&nbsp;&nbsp;font-family: sans-serif;<br>}</blockquote>
+
+```css
+h2 {
+  font-family: sans-serif;
+}
+```
+
 </section>
 
 ## Instructions

curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.english.md

@@ -9,7 +9,15 @@ videoUrl: 'https://scrimba.com/c/cM9MmCP'
 <section id='description'>
 CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.
 For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>
+
+```html
+<style>
+  .larger-image {
+    width: 500px;
+  }
+</style>
+```
+
 </section>
 
 ## Instructions

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 <code>monospace</code>, <code>serif</code> and <code>sans-serif</code>
 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 <code>Helvetica</code> font, but degrade to the <code>sans-serif</code> font when <code>Helvetica</code> isn't available, you will specify it as follows:
-<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, sans-serif;<br>}</blockquote>
+
+```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.
 </section>
 

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 <code>body</code> element.
 <section id='instructions'>
 We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.
 We can do this by adding the following to our <code>style</code> element:
-<blockquote>body {<br>&nbsp;&nbsp;background-color: black;<br>}</blockquote>
+
+```css
+body {
+  background-color: black;
+}
+```
+
 </section>
 
 ## Tests

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'
 <section id='description'>
 Classes are reusable styles that can be added to HTML elements.
 Here's an example CSS class declaration:
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.blue-text {<br>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>
+
+```html
+<style>
+  .blue-text {
+    color: blue;
+  }
+</style>
+```
+
 You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.
 You can apply a class to an HTML element like this:
 <code>&#60;h2 class="blue-text"&#62;CatPhotoApp&#60;/h2&#62;</code>

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
 <section id='description'>
 After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
-<blockquote>background: var(--penguin-skin);</blockquote>
+
+```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 <code>--penguin-skin</code> variable.
 Note that styles will not be applied unless the variable names are an exact match.
 </section>

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 <code>id</code> attributes is that, like classes, you can style them using CSS.
 However, an <code>id</code> is not reusable and should only be applied to one element. An <code>id</code> 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 <code>id</code> will be applied.
 Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:
-<blockquote>#cat-photo-element {<br>&nbsp;&nbsp;background-color: green;<br>}</blockquote>
+
+```css
+#cat-photo-element {
+  background-color: green;
+}
+```
+
 Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.
 </section>
 

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 <code>id</code> or <code>class</code> 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 <code>[attr=value]</code> 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 <code>type</code> and a corresponding value of <code>radio</code>:
-<blockquote>[type='radio'] {<br>&nbsp;&nbsp;margin: 20px 0px 20px 0px;<br>}</blockquote>
+
+```css
+[type='radio'] {
+  margin: 20px 0px 20px 0px;
+}
+```
+
 </section>
 
 ## Instructions

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 <code>properties</code> that you can use to
 When you entered <code>&#60;h2 style="color: red;"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were styling that individual <code>h2</code> element with <code>inline CSS</code>, which stands for <code>Cascading Style Sheets</code>.
 That's one way to specify the style of an element, but there's a better way to apply <code>CSS</code>.
 At the top of your code, create a <code>style</code> block like this:
-<blockquote>&#60;style&#62;<br>&#60;/style&#62;</blockquote>
+
+```html
+<style>
+</style>
+```
+
 Inside that style block, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, you would add a style rule that looks like this:
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;h2 {color: red;}<br>&#60;/style&#62;</blockquote>
+
+```html
+<style>
+  h2 {
+    color: red;
+  }
+</style>
+```
+
 Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) 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.
 </section>
 

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 <code>hex code</code> for short.
 We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.
 In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.
-<blockquote>body {<br>&nbsp;&nbsp;color: #000000;<br>}</blockquote>
+
+```css
+body {
+  color: #000000;
+}
+```
+
 </section>
 
 ## Instructions

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 <code>RGB</code> 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 <code>RGB</code>, 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.
-<blockquote>body {<br>&nbsp;&nbsp;background-color: rgb(255, 165, 0);<br>}</blockquote>
+
+```css
+body {
+  background-color: rgb(255, 165, 0);
+}
+```
+
 </section>
 
 ## Instructions

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 <code>unordered lists</code>, or bullet point style lists.
 Unordered lists start with an opening <code>&#60;ul&#62;</code> element, followed by any number of <code>&#60;li&#62;</code> elements. Finally, unordered lists close with a <code>&#60;/ul&#62;</code>
 For example:
-<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;milk&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;cheese&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>
+
+```html
+<ul>
+  <li>milk</li>
+  <li>cheese</li>
+</ul>
+```
+
 would create a bullet point style list of "milk" and "cheese".
 </section>
 

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 <code>input</code>.
 Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will automatically associate the radio button input with the label element surrounding it.
 All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
 Here's an example of a radio button:
-<blockquote>&#60;label&#62; <br>&nbsp;&nbsp;&#60;input type="radio" name="indoor-outdoor"&#62;Indoor <br>&#60;/label&#62;</blockquote>
+
+```html
+<label> 
+  <input type="radio" name="indoor-outdoor">Indoor 
+</label>
+```
+
 It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:
-<blockquote>&#60;label for="indoor"&#62; <br>&nbsp;&nbsp;&#60;input id="indoor" type="radio" name="indoor-outdoor"&#62;Indoor <br>&#60;/label&#62;</blockquote>
+
+```html
+<label for="indoor"> 
+  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
+</label>
+```
+
 </section>
 
 ## Instructions

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 <code>ordered lists</code>, or num
 Ordered lists start with an opening <code>&#60;ol&#62;</code> element, followed by any number of <code>&#60;li&#62;</code> elements. Finally, ordered lists are closed with the <code>&#60;/ol&#62;</code> tag.
 
 For example:
-<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>
+
+```html
+<ol>
+  <li>Garfield</li>
+  <li>Sylvester</li>
+</ol>
+```
+
 would create a numbered list of "Garfield" and "Sylvester".
 </section>
 

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 <code>&lt;!DOCTYPE ...&gt;</
 The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.
 Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code>&lt;html&gt;</code> goes directly below the <code>&lt;!DOCTYPE html&gt;</code> line, and the closing <code>&lt;/html&gt;</code> goes at the end of the page.
 Here's an example of the page structure:
-<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;!-- Your HTML code goes here --&gt;<br>&lt;/html&gt;</blockquote>
+
+```html
+<!DOCTYPE html>
+<html>
+  <!-- Your HTML code goes here -->
+</html>
+```
+
 </section>
 
 ## Instructions

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 <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.
 Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.
 Here's an example of a page's layout:
-<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- metadata elements --&gt;<br>&nbsp;&nbsp;&lt;/head&gt;<br>&nbsp;&nbsp;&lt;body&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- page contents --&gt;<br>&nbsp;&nbsp;&lt;/body&gt;<br>&lt;/html&gt;</blockquote>
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- metadata elements -->
+  </head>
+  <body>
+    <!-- page contents -->
+  </body>
+</html>
+```
+
 </section>
 
 ## Instructions

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 <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> 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 <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.
 Example usage, a <code>main</code> element with two child elements nested inside it:
-<blockquote>&#60;main&#62; <br>&nbsp;&nbsp;&#60;h1&#62;Hello World&#60;/h1&#62;<br>&nbsp;&nbsp;&#60;p&#62;Hello Paragraph&#60;/p&#62;<br>&#60;/main&#62;</blockquote>
+
+```html
+<main> 
+  <h1>Hello World</h1>
+  <p>Hello Paragraph</p>
+</main>
+```
+
 <strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
 </section>
 

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'
 <code>a</code> (<i>anchor</i>) 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 <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.
 Below is an example of an internal anchor link and its target element:
-<blockquote>&lt;a href="#contacts-header"&gt;Contacts&lt;/a&gt;<br>...<br>&lt;h2 id="contacts-header"&gt;Contacts&lt;/h2&gt;</blockquote>
+
+```html
+<a href="#contacts-header">Contacts</a>
+...
+<h2 id="contacts-header">Contacts</h2>
+```
+
 When users click the Contacts link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.
 </section>
 

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
 <section id='description'>
 You can nest links within other text elements.
-<blockquote>&#60;p&#62;<br> Here's a &#60;a target="_blank" href="http://freecodecamp.org"&#62; link to freecodecamp.org&#60;/a&#62; for you to follow.<br>&#60;/p&#62;</blockquote>
+
+```html
+<p>
+  Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
+</p>
+```
+
 Let's break down the example:
 Normal text is wrapped in the <code>p</code> element:<br> <code>&#60;p&#62; Here's a ... for you to follow. &#60;/p&#62;</code>
 Next is the <i>anchor</i> element <code>&#60;a&#62;</code> (which requires a closing tag <code>&#60;/a&#62;</code>):<br>  <code>&#60;a&#62; ... &#60;/a&#62;</code>

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 <code>radio</code> and <code>checkbox</code> report their values from the <code>value</code> attribute.
 
 For example:
-<blockquote>
+
-&#60;label for="indoor"&#62; <br>&nbsp;&nbsp;&#60;input id="indoor" value="indoor" type="radio" name="indoor-outdoor"&#62;Indoor <br>&#60;/label&#62;<br>
+```html
-&#60;label for="outdoor"&#62; <br>&nbsp;&nbsp;&#60;input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor"&#62;Outdoor <br>&#60;/label&#62;
+<label for="indoor"> 
-</blockquote>
+  <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>
+```
+
 
 Here, you have two <code>radio</code> inputs. When the user submits the form with the <code>indoor</code> option selected, the form data will include the line: <code>indoor-outdoor=indoor</code>. This is from the <code>name</code> and <code>value</code> attributes of the "indoor" input.
 

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
 <section id='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 <code>grid-template-columns</code> property on a grid container as demonstrated below:
-<blockquote>.container {<br>&nbsp;&nbsp;display: grid;<br>&nbsp;&nbsp;grid-template-columns: 50px 50px;<br>}</blockquote>
+
+```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 <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
 </section>

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
 <section id='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 <code>grid-column-gap</code> property like this:
-<blockquote>grid-column-gap: 10px;</blockquote>
+
+```css
+grid-column-gap: 10px;
+```
+
 This creates 10px of empty space between all of our columns.
 </section>
 

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
 <section id='description'>
 The repeat function comes with an option called <dfn>auto-fill</dfn>. 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 <code>auto-fill</code> with <code>minmax</code>, like this:
-<blockquote>repeat(auto-fill, minmax(60px, 1fr));</blockquote>
+
+```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.
 <strong>Note:</strong> If your container can't fit all your items on one row, it will move them down to a new one.
 </section>

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
 <section id='description'>
 You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:
-<blockquote>grid-template-areas:<br>&nbsp;&nbsp;"header header header"<br>&nbsp;&nbsp;"advert content content"<br>&nbsp;&nbsp;"footer footer footer";</blockquote>
+
+```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 <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.
 <strong>Note:</strong> 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 (<code>.</code>) to designate an empty cell in the grid.

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
 <section id='description'>
 There's another built-in function to use with <code>grid-template-columns</code> and <code>grid-template-rows</code> called <code>minmax</code>. 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:
-<blockquote>grid-template-columns: 100px minmax(50px, 200px);</blockquote>
+
+```css
+grid-template-columns: 100px minmax(50px, 200px);
+```
+
 In the code above, <code>grid-template-columns</code> 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.
 </section>
 

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
 <section id='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 <code>grid-area</code> property on an item like this:
-<blockquote>.item1 { grid-area: header; }</blockquote>
+
+```css
+.item1 {
+  grid-area: header;
+}
+```
+
 This lets the grid know that you want the <code>item1</code> class to go in the area named <code>header</code>. In this case, the item will use the entire top row because that whole row is named as the header area.
 </section>
 

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 <code>grid-template-columns</code> and <code>grid-template-rows</code> 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 <code>repeat</code> 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.
-<blockquote>grid-template-rows: repeat(100, 50px);</blockquote>
+
+```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:
-<blockquote>grid-template-columns: repeat(2, 1fr 50px) 20px;</blockquote>
+
+```css
+grid-template-columns: repeat(2, 1fr 50px) 20px;
+```
+
 This translates to:
-<blockquote>grid-template-columns: 1fr 50px 1fr 50px 20px;</blockquote>
+
+```css
+grid-template-columns: 1fr 50px 1fr 50px 20px;
+```
+
 <strong>Note:</strong> The <code>1fr 50px</code> is repeated twice followed by 20px.
 </section>
 

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 <code>px</code> and <code>em</code>
 <code>auto</code>: sets the column or row to the width or height of its content automatically,
 <code>%</code>: adjusts the column or row to the percent width of its container.
 Here's the code that generates the output in the preview:
-<blockquote>grid-template-columns: auto 50px 10% 2fr 1fr;</blockquote>
+
+```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.
 </section>
 

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
 <section id='description'>
 The <code>grid-area</code> 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:
-<blockquote>item1 { grid-area: 1/1/2/4; }</blockquote>
+
+```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:
-<blockquote>grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;</blockquote>
+
+```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.
 </section>
 

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:
 <div style="position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;"><p style="left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;">column lines</p><p style="left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">1</p><p style="left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">2</p><p style="left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">3</p><p style="left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;">4</p><p style="left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;">row lines</p><p style="left:-10%;top:-10%;font-size:130%;position:absolute;">1</p><p style="left:-10%;top:21%;font-size:130%;position:absolute;">2</p><p style="left:-10%;top:53%;font-size:130%;position:absolute;">3</p><p style="left:-10%;top:85%;font-size:130%;position:absolute;">4</p><div style="left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;"></div><div style="left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;"></div><div style="left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;"></div></div>
 To control the amount of columns an item will consume, you can use the <code>grid-column</code> property in conjunction with the line numbers you want the item to start and stop at.
 Here's an example:
-<blockquote>grid-column: 1 / 3;</blockquote>
+
+```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.
 </section>
 

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:
 <code>img { width: 720px; }</code>
 You can use:
-<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>
+
+```css
+img {
+  max-width: 100%;
+  display: block;
+  height: auto;
+}
+```
+
 The <code>max-width</code> 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 <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.
 </section>
 

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 <code>width</code> and <code>height</code> 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:
-<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>
+
+```html
+<style>
+  img { height: 250px; width: 250px; }
+</style>
+<img src="coolPic500x500" alt="A most excellent picture">
+```
+
 </section>
 
 ## Instructions