diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md
index 5b12dbfdab4..f7061d1bfb4 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.english.md
@@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/c/c437as3'
There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.
For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.
-Note
Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.
+Note: Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.
## 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 5479dd1ef8b..524c2d7ee08 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
@@ -11,13 +11,13 @@ HTML5's audio element gives semantic meaning when it wraps sound or
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>
<source src="audio/meow.mp3" type="audio/mpeg" />
<source src="audio/meow.ogg" type="audio/ogg" />
</audio>
-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.
+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.
## Instructions
Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an audio element after the p. Include the controls attribute. Then place a source tag inside the audio tags with the src attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and type attribute set to "audio/mpeg".
-Note
The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
+Note: The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md
index f1b52a8d340..b863d36c51d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.english.md
@@ -11,7 +11,7 @@ In the last challenge, you learned that including an alt attribute
In situations when an image is already explained with text content, or does not add meaning to a page, the img still needs an alt attribute, but it can be set to an empty string. Here's an example:
<img src="visualDecoration.jpeg" alt="">
Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
-Note
For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.
+Note: For images with a caption, you may still want to include alt text, since it helps search engines catalog the content of the image.
## 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 624a188e02a..1e4beaf62e2 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
@@ -11,7 +11,7 @@ Have you noticed that all of the applied accessibility challenges so far haven't
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:
.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:
+Note: The following CSS approaches will NOT do the same thing:
display: none; or visibility: hidden; hides content for everyone, including screen reader users- Zero values for pixel sizes, such as
width: 0px; height: 0px; removes that element from the flow of your document, meaning screen readers will ignore it
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md
index 7c9befc0754..7507f90214d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.english.md
@@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/c/cB76vtv'
The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages.
header shares the embedded landmark feature you saw with main, allowing assistive technologies to quickly navigate to that content.
-Note
header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.
+Note: The header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
index e896c694211..e08354c33c8 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.english.md
@@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/c/cmzMDHW'
The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them. Here's an example:
<div tabindex="0">I need keyboard focus!</div>
-Note
A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges.
+Note: A negative tabindex value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a div used for a pop-up window is activated), and is beyond the scope of these challenges.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
index 618aa9a2b9c..715c6f900c3 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.english.md
@@ -11,7 +11,7 @@ CSS treats each HTML element as its own box, which is usually referred to as the
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 {
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.
+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.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
index 17808391371..c30e230a5f2 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.english.md
@@ -13,7 +13,7 @@ You can use the hr tag to add a horizontal line across the width of
## Instructions
Add an hr tag underneath the h4 which contains the card title.
-Note
In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag.
+Note: In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
index 55c4072434d..2a295cf23b0 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.english.md
@@ -13,7 +13,7 @@ Some examples of complementary colors with their hex codes are:
red (#FF0000) and cyan (#00FFFF)
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing). Read here for more information on this complex subject.
There are many color picking tools available online that have an option to find the complement of a color.
-Note
For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
+Note: For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
index 35b45ea96f4..a35b023b730 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.english.md
@@ -11,7 +11,7 @@ The transform property has a variety of functions that lets you sca
Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
p:hover {
transform: scale(2.1);
}
- NOTE: Applying a transform to a div element will also affect any child elements contained in the div.
+ Note: Applying a transform to a div element will also affect any child elements contained in the div.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
index 099373984d6..63bb7ccfc7d 100644
--- a/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.english.md
@@ -13,7 +13,7 @@ To underline text, you can use the u tag. This is often used to sig
## Instructions
Wrap the u tag only around the text "Ph.D. students".
-Note
Try to avoid using the u tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
+Note: Try to avoid using the u tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md
index dab1c3c1463..62bb4e98423 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.english.md
@@ -13,7 +13,7 @@ Your cat photo currently has sharp corners. We can round out those corners with
## Instructions
You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.
-Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class.
+Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md
index 8ac55ece913..50916f2d3f6 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.english.md
@@ -19,7 +19,7 @@ Give your h1 element the id attribute of orange-
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;
}
-Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
+Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md
index de9926cdb44..737600b4a79 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.english.md
@@ -17,7 +17,7 @@ Create an additional CSS class called blue-text that gives an eleme
Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.
Applying multiple class attributes to a HTML element is done with a space between them like this:
class="class1 class2"
-Note: It doesn't matter which order the classes are listed in the HTML element.
+Note: It doesn't matter which order the classes are listed in the HTML element.
However, the order of the class declarations in the <style> section are what is important. The second declaration will always take precedence over the first. Because .blue-text is declared second, it overrides the attributes of .pink-text
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 ff3324373c7..073c109dbcb 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
@@ -15,7 +15,7 @@ For example, if we wanted to create a CSS class called larger-image
## Instructions
Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.
-Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
+Note: Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
## Tests
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 03c1e369668..4555dcad01c 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
@@ -18,7 +18,7 @@ Generic font family names are not case-sensitive. Also, they do not need quotes
To begin with, apply the monospace font to the h2 element, so that it now has two fonts - Lobster and monospace.
In the last challenge, you imported the Lobster font using the link tag. Now comment out that import of the Lobster font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your h2 element degrades to the monospace font.
-Note
If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
+Note: If you have the Lobster font installed on your computer, you won't see the degradation because your browser is able to find the font.
## Tests
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.english.md
index 37754ce8351..fdf6417b28f 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.english.md
@@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/c/cN66JSL'
The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.
The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font. If you use it to set the font-size property itself, it's relative to the parent's font-size.
-Note
There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
+Note: There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.english.md
index 02b093a1784..fde6699cb31 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.english.md
@@ -12,7 +12,7 @@ An example of this would be:
<img src="https://www.your-image-source.com/your-image.jpg">
Note that img elements are self-closing.
All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
-Note: If the image is purely decorative, using an empty alt attribute is a best practice.
+Note: If the image is purely decorative, using an empty alt attribute is a best practice.
Ideally the alt attribute should not contain special characters unless needed.
Let's add an alt attribute to our img example above:
<img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">
diff --git a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.english.md b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.english.md
index d6d7c2fc35a..2a5285ae8ee 100644
--- a/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.english.md
@@ -15,8 +15,7 @@ You can create a paragraph element like this:
## Instructions
Create a p element below your h2 element, and give it the text "Hello Paragraph".
-Note:
-As a convention, all HTML tags are written in lowercase, for example <p></p> and not <P></P>.
+Note: As a convention, all HTML tags are written in lowercase, for example <p></p> and not <P></P>.
## Tests
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 6aef36ecbd5..8de304f401a 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,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am'
HTML5 introduces more descriptive HTML tags. These include header, footer, nav, video, article, section and others.
These tags make your HTML easier to read, and also 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.
-Note
Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
+Note: Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
index 921f9aa625a..acd7dbdb7b9 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.english.md
@@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
Other options for flex-direction are row-reverse and column-reverse.
-Note
The default value for the flex-direction property is row.
+Note: The default value for the flex-direction property is row.
## Instructions
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 5443ade8099..696552f5b2f 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
@@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
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));
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.
+Note: If your container can't fit all your items on one row, it will move them down to a new one.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
index f8126a4a90d..ccb454f1f44 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.english.md
@@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
## Description
auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.
-Note
If your container can't fit all your items on one row, it will move them down to a new one.
+Note: If your container can't fit all your items on one row, it will move them down to a new one.
## Instructions
diff --git a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
index 62e47e39dbe..29f76de41ff 100644
--- a/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
+++ b/curriculum/challenges/english/01-responsive-web-design/css-grid/create-your-first-css-grid.english.md
@@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
## Description
Turn any HTML element into a grid container by setting its display property to grid. This gives you the ability to use all the other properties associated with CSS Grid.
-Note
In CSS Grid, the parent element is referred to as the container and its children are called items.
+Note: In CSS Grid, the parent element is referred to as the container and its children are called items.
## Instructions
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 0fbf8c7e081..68866e84b63 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
@@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
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";
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.
+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/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 f67860c9171..b432acce9bf 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
@@ -15,7 +15,7 @@ You can also repeat multiple values with the repeat function and insert the func
grid-template-columns: repeat(2, 1fr 50px) 20px;
This translates to:
grid-template-columns: 1fr 50px 1fr 50px 20px;
-Note
1fr 50px is repeated twice followed by 20px.
+Note: The 1fr 50px is repeated twice followed by 20px.
## Instructions