fix: updated the note sections for responsive web design english (#35528)
This commit is contained in:
rupali317
Oliver Eyton-Williams
parent
6d43682397
commit
bc72c86dc6
@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/c/c437as3'
|
||||
<section id='description'>
|
||||
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.
|
||||
<strong>Note</strong><br>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.
|
||||
<strong>Note:</strong> 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.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,13 +11,13 @@ HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or
|
||||
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><audio id="meowClip" controls><br> <source src="audio/meow.mp3" type="audio/mpeg" /><br> <source src="audio/meow.ogg" type="audio/ogg" /><br></audio><br></blockquote>
|
||||
<strong>Note</strong><br>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.
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
<section id='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 <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" and <code>type</code> attribute set to "audio/mpeg".
|
||||
<strong>Note</strong><br>The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
|
||||
<strong>Note:</strong> The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -11,7 +11,7 @@ In the last challenge, you learned that including an <code>alt</code> attribute
|
||||
In situations when an image is already explained with text content, or does not add meaning to a page, the <code>img</code> still needs an <code>alt</code> attribute, but it can be set to an empty string. Here's an example:
|
||||
<code><img src="visualDecoration.jpeg" alt=""></code>
|
||||
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.
|
||||
<strong>Note</strong><br>For images with a caption, you may still want to include <code>alt</code> text, since it helps search engines catalog the content of the image.
|
||||
<strong>Note:</strong> For images with a caption, you may still want to include <code>alt</code> text, since it helps search engines catalog the content of the image.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -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:
|
||||
<blockquote>.sr-only {<br> position: absolute;<br> left: -10000px;<br> width: 1px;<br> height: 1px;<br> top: auto;<br> overflow: hidden;<br>}</blockquote>
|
||||
<strong>Note</strong><br>The following CSS approaches will NOT do the same thing:
|
||||
<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>
|
||||
<li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>
|
||||
|
||||
@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/c/cB76vtv'
|
||||
<section id='description'>
|
||||
The next HTML5 element that adds semantic meaning and improves accessibility is the <code>header</code> 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.
|
||||
<code>header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.
|
||||
<strong>Note</strong><br><code>header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.
|
||||
<strong>Note:</strong> The <code>header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/c/cmzMDHW'
|
||||
The HTML <code>tabindex</code> 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 <code>div</code>, <code>span</code>, and <code>p</code>, by placing a <code>tabindex="0"</code> attribute on them. Here's an example:
|
||||
<code><div tabindex="0">I need keyboard focus!</div></code>
|
||||
<strong>Note</strong><br>A negative <code>tabindex</code> 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 <code>div</code> used for a pop-up window is activated), and is beyond the scope of these challenges.
|
||||
<strong>Note:</strong> A negative <code>tabindex</code> 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 <code>div</code> used for a pop-up window is activated), and is beyond the scope of these challenges.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -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 <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> position: relative;<br> bottom: 10px;<br>}</blockquote>
|
||||
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><br>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.
|
||||
<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>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -13,7 +13,7 @@ You can use the <code>hr</code> tag to add a horizontal line across the width of
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.
|
||||
<strong>Note</strong><br>In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
|
||||
<strong>Note:</strong> In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -13,7 +13,7 @@ Some examples of complementary colors with their hex codes are:
|
||||
<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>
|
||||
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 <a href='https://en.wikipedia.org/wiki/Color_model' target='_blank'>here</a> 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.
|
||||
<strong>Note</strong><br>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.
|
||||
<strong>Note:</strong> 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.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -11,7 +11,7 @@ The <code>transform</code> 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:
|
||||
<blockquote>p:hover {<br> transform: scale(2.1);<br>}</blockquote>
|
||||
|
||||
<strong>NOTE:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
|
||||
<strong>Note:</strong> Applying a transform to a <code>div</code> element will also affect any child elements contained in the div.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -13,7 +13,7 @@ To underline text, you can use the <code>u</code> tag. This is often used to sig
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Wrap the <code>u</code> tag only around the text "Ph.D. students".
|
||||
<strong>Note</strong><br>Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
|
||||
<strong>Note:</strong> Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -13,7 +13,7 @@ Your cat photo currently has sharp corners. We can round out those corners with
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.
|
||||
Note: this challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <code>.smaller-image</code> class.
|
||||
<strong>Note:</strong> this challenge allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or the <code>.smaller-image</code> class.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -19,7 +19,7 @@ Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-
|
||||
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> color: brown;<br>}</blockquote>
|
||||
Note: It doesn't matter whether you declare this CSS above or below pink-text class, since id attribute will always take precedence.
|
||||
<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>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -17,7 +17,7 @@ Create an additional CSS class called <code>blue-text</code> that gives an eleme
|
||||
Apply the <code>blue-text</code> class to your <code>h1</code> element in addition to your <code>pink-text</code> 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:
|
||||
<code>class="class1 class2"</code>
|
||||
Note: It doesn't matter which order the classes are listed in the HTML element.
|
||||
<strong>Note:</strong> It doesn't matter which order the classes are listed in the HTML element.
|
||||
However, the order of the <code>class</code> declarations in the <code><style></code> section are what is important. The second declaration will always take precedence over the first. Because <code>.blue-text</code> is declared second, it overrides the attributes of <code>.pink-text</code>
|
||||
</section>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ For example, if we wanted to create a CSS class called <code>larger-image</code>
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.
|
||||
<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
|
||||
<strong>Note:</strong> Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -18,7 +18,7 @@ Generic font family names are not case-sensitive. Also, they do not need quotes
|
||||
<section id='instructions'>
|
||||
To begin with, apply the <code>monospace</code> font to the <code>h2</code> element, so that it now has two fonts - <code>Lobster</code> and <code>monospace</code>.
|
||||
In the last challenge, you imported the <code>Lobster</code> font using the <code>link</code> tag. Now comment out that import of the <code>Lobster</code> font(using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your <code>h2</code> element degrades to the <code>monospace</code> font.
|
||||
<strong>Note</strong><br>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.
|
||||
<strong>Note:</strong> 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.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/c/cN66JSL'
|
||||
The last several challenges all set an element's margin or padding with pixels (<code>px</code>). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to <code>px</code>, 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, <code>in</code> and <code>mm</code> 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 <code>em</code> or <code>rem</code>, are relative to another length value. For example, <code>em</code> is based on the size of an element's font. If you use it to set the <code>font-size</code> property itself, it's relative to the parent's <code>font-size</code>.
|
||||
<strong>Note</strong><br>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.
|
||||
<strong>Note:</strong> 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.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -12,7 +12,7 @@ An example of this would be:
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg"></code>
|
||||
Note that <code>img</code> elements are self-closing.
|
||||
All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> 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 <code>alt</code> attribute is a best practice.
|
||||
<strong>Note:</strong> If the image is purely decorative, using an empty <code>alt</code> attribute is a best practice.
|
||||
Ideally the <code>alt</code> attribute should not contain special characters unless needed.
|
||||
Let's add an <code>alt</code> attribute to our <code>img</code> example above:
|
||||
<code><img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up."></code>
|
||||
|
||||
@ -15,8 +15,7 @@ You can create a paragraph element like this:
|
||||
## Instructions
|
||||
<section id='instructions'>
|
||||
Create a <code>p</code> element below your <code>h2</code> element, and give it the text "Hello Paragraph".
|
||||
Note:
|
||||
As a convention, all HTML tags are written in lowercase, for example <code><p></p></code> and not <code><P></P></code>.
|
||||
<strong>Note:</strong> As a convention, all HTML tags are written in lowercase, for example <code><p></p></code> and not <code><P></P></code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
|
||||
@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pVMPUv/c4Ep9Am'
|
||||
HTML5 introduces more descriptive HTML tags. These include <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.
|
||||
These tags make your HTML easier to read, and also 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.
|
||||
<strong>Note</strong><br>Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
|
||||
<strong>Note:</strong> Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -9,7 +9,7 @@ videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
<section id='description'>
|
||||
Adding <code>display: flex</code> 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 <code>flex-direction</code> 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 <code>flex-direction</code> are row-reverse and column-reverse.
|
||||
<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is <code>row</code>.
|
||||
<strong>Note:</strong> The default value for the <code>flex-direction</code> property is <code>row</code>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
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>
|
||||
When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one.
|
||||
<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new 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>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
## Description
|
||||
<section id='description'>
|
||||
<code>auto-fit</code> works almost identically to <code>auto-fill</code>. The only difference is that when the container's size exceeds the size of all the items combined, <code>auto-fill</code> keeps inserting empty rows or columns and pushes your items to the side, while <code>auto-fit</code> collapses those empty rows or columns and stretches your items to fit the size of the container.
|
||||
<strong>Note</strong><br>If your container can't fit all your items on one row, it will move them down to a new 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>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -8,7 +8,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
## Description
|
||||
<section id='description'>
|
||||
Turn any HTML element into a grid container by setting its <code>display</code> property to <code>grid</code>. This gives you the ability to use all the other properties associated with CSS Grid.
|
||||
<strong>Note</strong><br>In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
|
||||
<strong>Note:</strong> In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
@ -10,7 +10,7 @@ videoUrl: 'https://scrimba.com/p/pByETK/cLLpGAy'
|
||||
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> "header header header"<br> "advert content content"<br> "footer footer footer";</blockquote>
|
||||
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><br>Every word in the code represents a cell and every pair of quotation marks represent a row.
|
||||
<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.
|
||||
</section>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@ You can also repeat multiple values with the repeat function and insert the func
|
||||
<blockquote>grid-template-columns: repeat(2, 1fr 50px) 20px;</blockquote>
|
||||
This translates to:
|
||||
<blockquote>grid-template-columns: 1fr 50px 1fr 50px 20px;</blockquote>
|
||||
<strong>Note</strong><br><code>1fr 50px</code> is repeated twice followed by 20px.
|
||||
<strong>Note:</strong> The <code>1fr 50px</code> is repeated twice followed by 20px.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user