learning is fun
` on the screen. +Enable the interactive editor and try adding a `<p>learning is fun</p>` below the paragraph element. You should see `learning is fun
` on the screen. :::interactive_editor @@ -40,7 +41,7 @@ Another type of character reference would be the decimal numeric reference. This Here is an example of using the decimal numeric reference for the less than symbol. -Change the code in the editor to see different symbols. You can use `©` for the copyright symbol and `®` for the trademark symbol. +Enable the interactive editor and change the code to see different symbols. You can use `©` for the copyright symbol and `®` for the trademark symbol. :::interactive_editor @@ -54,7 +55,7 @@ The last type of character reference would be the hexadecimal numeric reference. Here is an example of using the hexadecimal numeric reference for the less than symbol. -Change the code in the editor to see different symbols. You can use `€` for the euro symbol and `Ω` for the Greek capital letter Omega symbol. +Enable the interactive editor and change the code to see different symbols. You can use `€` for the euro symbol and `Ω` for the Greek capital letter Omega symbol. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md b/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md index 7a8cfe15ee4..418c35a9f44 100644 --- a/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md +++ b/curriculum/challenges/english/blocks/lecture-html-fundamentals/670838b10ee87a18e5faff62.md @@ -9,7 +9,7 @@ dashedName: what-is-the-role-of-the-script-element-in-html The `script` element is used to embed executable code. Most developers will use this to execute JavaScript code. JavaScript is used to add interactivity to your web pages. Common examples of using JavaScript include interactive games, image sliders, and dynamic forms that validate user input in real-time. -Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. +Here is an example of using the `script` element in an HTML document. Remove the `//` from in front of the `alert("Welcome to freeCodeCamp");` and you should see an alert pop up. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md index eec7f06ee9b..6a278054f8b 100644 --- a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md +++ b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672985445d7da807c6b4f406.md @@ -27,7 +27,7 @@ Following the pattern, your `h3` element should always come after an `h2` elemen But this code would not be correct, because `h3` comes before `h2`. -Move the `h2` element above the `h3` so it is semantically correct. +Move the `h2` element above the `h3` so it is semantically correct. To interact with the code, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md index dabe2d1a67f..28dea5e4268 100644 --- a/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md +++ b/curriculum/challenges/english/blocks/lecture-importance-of-semantic-html/672990ecf71a852804ababe7.md @@ -13,7 +13,7 @@ Many presentational HTML elements are deprecated, which means that they are outd The `font` element is a deprecated element used to set the font size and color of the text. Here's an example of a `font` element. -Change the size from 5 to 7 to see the font increase. +Enable the interactive editor and change the size from 5 to 7 to see the font increase. :::interactive_editor @@ -29,7 +29,7 @@ While this element still works, you should not use it because the font size and The `center` element is another deprecated element that is used to center the content horizontally within its container. Here's an example of the `center` element that contains text and a paragraph element. -Add `center` tags around the `Another example text.
` to see it centered on the page. +Enable the interactive editor and add `center` tags around the `Another example text.
` to see it centered on the page. :::interactive_editor @@ -46,7 +46,7 @@ Add `center` tags around the `Another example text.
` to see it centered o And next, we have the `big` element. This is another deprecated presentational HTML element that makes the enclosed text one level bigger than its surrounding text. Here we have an example that defines a paragraph with two parts. -Add `big` tags around the `Some other text` and see the changes in the preview window. +Enable the interactive editor and add `big` tags around the `Some other text` and see the changes in the preview window. :::interactive_editor @@ -77,7 +77,7 @@ Examples of semantic HTML elements include: This is an example of a `header` element that contains a navigation section element. -Add a `Products` inside of the `nav` and see the changes in the preview window. +Enable the interactive editor and add a `Products` inside of the `nav` and see the changes in the preview window. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md index 7cc687cee5a..b6e893a2fb7 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a54bc58319c8fe6f78ad4.md @@ -20,11 +20,11 @@ It is important to remember that `aria-hidden` only hides content from assistive You should never use `aria-hidden` to hide an element that is focusable with the keyboard. The `aria-hidden` attribute only removes the element from the accessibility tree. It does not remove it from the DOM. Thus, it will still be possible for screen reader users to tab to the element, but their screen reader will not announce the element, effectively causing them to focus on "nothing". -Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. +Here's an example where we hide an icon from the accessibility tree by adding the `aria-hidden` attribute with a value of `true`. We only keep the text exposed to assistive technologies to avoid any confusion that may arise from the redundancy of having both an icon and text for the same purpose. -**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. +**NOTE**: This interactive example includes the Font Awesome CDN so you can see the gear icon displayed in the preview window. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md index 4568fe4c92c..6d66d62c07b 100644 --- a/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md +++ b/curriculum/challenges/english/blocks/lecture-introduction-to-aria/672a551975938a916c74802c.md @@ -13,7 +13,7 @@ The most common use for `aria-describedby` is to associate instructions and erro Let's take a look at a few examples to understand how it works. In this first example, we have a `form` element that accepts a password. -Type a few characters into the password input field and you will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. +Enable the interactive editor and type a few characters into the password input field. You will see that the password is masked in the preview window. You should also see that the `password-help` text remains red until you provide 8 or more characters into the input. NOTE: This interactive example is using CSS and JavaScript to dynamically update the color for the `password-help` text. Don't worry about trying to understand the JavaScript code because you will learn JavaScript in future modules. diff --git a/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md b/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md index a4d42065af9..6230244620a 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-html-attributes/6708143cab2b583ecd3324f5.md @@ -17,7 +17,7 @@ The attribute name is followed by an equal sign (`=`) and a value in quotes. The This first example uses the `href` and `target` attributes. The `href` attribute specifies the URL of a link and the `target` attribute specifies where to open the link. -Change the `href="https://www.freecodecamp.org/news/"` to `href="https://www.freecodecamp.org"`. Now when you click on the link in the interactive editor, you will see the freeCodeCamp homepage in a new browser tab. +Enable the interactive editor and change the `href="https://www.freecodecamp.org/news/"` to `href="https://www.freecodecamp.org"`. Now when you click on the link in the interactive editor, you will see the freeCodeCamp homepage in a new browser tab. :::interactive_editor @@ -31,7 +31,7 @@ Without the `href` attribute, the link would not work because there would be no Other common attributes are the `src`, and `alt`, or alternative, attribute - which is used to specify the source of an image and provide alternative descriptive text for the image, respectively. -Change the `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"` to `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"`. Then change the `alt="Two tabby kittens sleeping together on a couch."` to `alt="Two cats running in the dirt."`. +Enable the interactive editor and change the `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"` to `src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg"`. Then change the `alt="Two tabby kittens sleeping together on a couch."` to `alt="Two cats running in the dirt."`. :::interactive_editor @@ -45,7 +45,7 @@ Similar to the `href` attribute, the `src` attribute is required because it spec Some attributes are a little unique with their syntax like the `checked` attribute. -Try clicking on the checkbox in the preview window to see it alternate between a checked and unchecked state. +Enable the interactive editor and try clicking on the checkbox in the preview window to see it alternate between a checked and unchecked state. :::interactive_editor @@ -59,7 +59,7 @@ In the following example, we have an `input` element with the `type` attribute s The `checked` attribute is used to specify that the checkbox should be checked by default. The `checked` attribute does not require a value. If it is present, the checkbox will be checked by default. If the attribute is not present, the checkbox will be unchecked. This is known as a boolean attribute. You will learn more about booleans in general when you get to the JavaScript section. -Remove the `checked` attribute from the `input` in the interactive editor, and you will see that the checkbox is no longer checked by default. +Enable the interactive editor and try remove the `checked` attribute from the `input`. You will see that the checkbox is no longer checked by default. :::interactive_editor @@ -71,7 +71,7 @@ Remove the `checked` attribute from the `input` in the interactive editor, and y There are several common boolean attributes you will encounter in HTML, such as `disabled`, `readonly`, and `required`. These attributes are used to specify the state of an element, such as whether it is disabled, read-only, or required. -Here is an example of a text `input` element that is disabled by default. Try clicking on the `input` element in the preview window. Now remove the `disabled` attribute from the `input` element and you will see that the `input` is no longer disabled by default. You should now be able to click on it and type inside the field. +Here is an example of a text `input` element that is disabled by default. Enable the interactive editor and try clicking on the `input` element in the preview window. Now remove the `disabled` attribute from the `input` element and you will see that the `input` is no longer disabled by default. You should now be able to click on it and type inside the field. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md index fd657cd013c..34dfafed213 100644 --- a/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md +++ b/curriculum/challenges/english/blocks/lecture-understanding-nuanced-semantic-elements/672995bda6c67e369aaf8588.md @@ -11,7 +11,7 @@ Description lists are perfect for presenting terms and definitions in an organiz This is an example of a description list in HTML with two terms and their corresponding details. -Uncomment the code to see the new detail item show up in the preview window. +Enable the interactive editor and try uncommenting the code to see the new detail item show up in the preview window. :::interactive_editor @@ -40,7 +40,7 @@ In the browser, you would see each term followed by its corresponding descriptio But description lists are not limited to only terms and definitions. They are much more versatile than that. Here we have a recipe with two ingredients. -Uncomment the code to see the new detail item show up in the preview window. +Enable the interactive editor and try uncommenting the code to see the new detail item show up in the preview window. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md index 62c0a000746..2d4630a9d3a 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bafe4ef812b78696b0e27.md @@ -11,7 +11,7 @@ dashedName: what-are-best-practices-for-designing-a-dark-mode-feature Dark mode is a special feature on web applications where you can change the default light color scheme to a dark color scheme. This helps reduce eye strain and improve readability in low-light conditions. When designing your dark mode features, it is important to understand best practices to ensure that your dark mode feature is effective and user-friendly. -Click on the `Toggle Dark Mode` button in the example below to see how dark mode works. +Enable the interactive editor and click on the `Toggle Dark Mode` button in the example below to see how dark mode works. :::interactive_editor @@ -55,7 +55,7 @@ document.getElementById('theme-toggle').addEventListener('click', () => { ::: -The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode. +The first consideration is the avoidance of saturated colors in dark mode. Saturated colors are colors that are bright and intense. For example, a bright magenta button against a dark gray background can be too intense and cause eye strain. Instead, you should use desaturated colors in dark mode. Desaturated colors are colors that are less intense, have a lower saturation level, and more comfortable to look at in dark mode. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -133,7 +133,7 @@ document.getElementById('theme-toggle').addEventListener('click', () => { ::: -Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode. +Another consideration with dark mode is the use of pure black backgrounds with white text. While this high contrast can be effective, it can also be too harsh on the eyes. Instead, consider using a dark gray background with light gray text for a softer contrast. Text will be easier on the eyes and more comfortable to read in dark mode. To see the previews, you will need to enable the interactive editor. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md index bf2b7527be9..b01d156abdd 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baff13bc5b3789691c75c.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-breadcrumbs # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. When it comes to web design, there are many types of navigational aids you can use. Examples include top navigation bars, sidebars, and footers. But if your site is on the more complex side with deeper levels of navigation, you might want to consider using breadcrumbs. @@ -57,7 +57,7 @@ When it comes to designing breadcrumbs, there are a few considerations to keep i ::: -The second consideration is the placement of the breadcrumbs. Breadcrumbs are typically placed at the top of the page, either above or below the main navigation bar. Users shouldn't have to struggle to find the breadcrumbs, so make sure they are visible and easy to locate. +The second consideration is the placement of the breadcrumbs. Breadcrumbs are typically placed at the top of the page, either above or below the main navigation bar. Users shouldn't have to struggle to find the breadcrumbs, so make sure they are visible and easy to locate. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md index f26a31a84f6..a9c727add3c 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672baffc684be178dd02fa06.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-cards # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Card components are a very common occurrence in e-commerce, social media, and news sites. They are used to help display information in a structured way. When you are designing your cards, it is important to understand best practices so your users can easily understand the information you are trying to convey. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md index 362fc8e08b6..36fc60559dc 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb009952c7a7904a750cb.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-infinite-scrolls # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Infinite scrolling is a design pattern that loads more content as the user scrolls down the page. Oftentimes, this is used on social media sites like Twitter. For example, if you are logged in and want to see more tweets, you can scroll down and more tweets will load. This is an example of infinite scrolling. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md index 7877a463cc5..0afcd887156 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb015cfc889794359c4e0.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-modal-dialogs # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. What is a modal? It's the type of pop-up that a website might show you on top of their content. HTML has a `dialog` element that you can use to create modals. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md index 7f377ac9167..a330b4c59a2 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02009ffc0797ca567ab.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-progress-indication-on-forms-registratio # --interactive-- -**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS and JavaScript that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. Progress indication is a way to show users how far they are in a process. It can be used in forms, registration, and setup processes. The goal is to help users understand where they are in the process and how much more they need to do. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md index 3e00e2dcc87..0bd9db8200c 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb02ecb230779bbbaccd9.md @@ -7,7 +7,7 @@ dashedName: what-are-best-practices-for-designing-shopping-carts # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. There are thousands of e-commerce websites on the internet, and the shopping cart is a crucial part of the e-commerce experience. A good design can make the shopping cart experience more enjoyable and increase sales. A poor design can lead to abandoned carts and lost sales. diff --git a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md index 1b7052593de..e4f13c08a5a 100644 --- a/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md +++ b/curriculum/challenges/english/blocks/lecture-user-centered-design/672bb03999f39379f67d8972.md @@ -7,7 +7,7 @@ dashedName: what-is-progressive-disclosure # --interactive-- -**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. +**NOTE**: Some of the interactive examples might use CSS that you haven't learned yet. Don't worry about trying to understand all of the code. The goal of the examples is to show you previews for these design concepts so you better understand how things work. To see the previews, you will need to enable the interactive editor. A progressive disclosure is a design pattern used to only show users relevant content based on their current activity and hide the rest. This is done to reduce cognitive load and make the user experience more intuitive. diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md index 0b3a6c138bd..f98be9328c5 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672aa5e1f8b935577acfb2b9.md @@ -82,7 +82,7 @@ Let's consider a simple analogy. If you think of a website as a house, HTML woul CSS works by selecting HTML elements and applying styles to them. -Here is an example showing an unstyled `button` element and a styled one. +Here is an example showing an unstyled `button` element and a styled one. To interact with this example, you will need to enable the interactive editor. :::interactive_editor @@ -123,7 +123,7 @@ This means that with CSS, you can make your website look great on any device, wh CSS allows you to adjust layouts, font sizes, and other visual elements based on the screen size of the device viewing the website. -Try adjusting the size of the preview window to see how the layout adapts to the screen size. +Try enabling the interactive editor and adjust the size of the preview window to see how the layout adapts to the screen size. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md index 8833a827dff..e21077b9624 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672acbbe2891564c4e316164.md @@ -33,7 +33,7 @@ The value would be the specific setting applied to that property. For example, i After each property name, you need to place a colon, and after each value, you should have a semicolon. -Now that you know the syntax for a CSS rule, let's take a look at an example. Click on the `styles.css` tab in the interactive editor to see the CSS code. +Now that you know the syntax for a CSS rule, let's take a look at an example. Enable the interactive editor and click on the `styles.css` tab to see the CSS code. :::interactive_editor @@ -61,7 +61,7 @@ The declaration consists of the `color` property with a value set to `blue`. Thi If you want to apply the same set of styles to multiple selectors, you can create a selector list with each selector separated by a comma. -Here is an example of styling multiple selectors: +Here is an example of styling multiple selectors (to interact with the example, enable the interactive editor): :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md index ac733bf309b..fdf5bc0ad5d 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-audio-and-video-elements/67168278ac6df6a799555db5.md @@ -12,7 +12,7 @@ The `video` element supports mp4, ogg, and webm formats. To include audio content on your web page, you can use the `audio` element with the `src` attribute pointing to the location of your audio file. -As you can see in the preview window, nothing shows up on the page. +As you can see in the preview window, nothing shows up on the page. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -24,7 +24,7 @@ As you can see in the preview window, nothing shows up on the page. If you want to see the audio player on the page, then you can add the `audio` element with the `controls` attribute. -Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the `src` value to `"https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3"`. +Press play in the preview window to hear one of Quincy Larson's songs. To hear a different song, change the `src` value to `"https://cdn.freecodecamp.org/curriculum/js-music-player/never-not-favored.mp3"`. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -38,7 +38,7 @@ The `controls` attribute enables users to manage audio playback, including adjus Apart from the `src` and `controls` attributes, there are several other attributes that enhance the functionality of the `audio` element. The `loop` attribute is a boolean attribute that makes the audio replay continuously. -Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, scrub the play head close the end of the song and it will restart again once it is finished. +Here's an example of using the `loop` attribute to play one of Quincy Larson's songs titled "Can't stay down". To see the looping in action, enable the interactive editor, scrub the play head close the end of the song and it will restart again once it is finished. :::interactive_editor @@ -54,7 +54,7 @@ Here's an example of using the `loop` attribute to play one of Quincy Larson's s Another attribute you can use is the `muted` attribute. When present in the `audio` element, this boolean attribute will start the audio in a muted state. Here's an example of using the `muted` attribute. -To hear the music, click on the volume icon in the audio player. +To hear the music, enable the interactive editor and click on the volume icon in the audio player. :::interactive_editor @@ -83,7 +83,7 @@ The browser will first start with the ogg type, and if it can't play the audio, All the attributes we have learned so far are also supported in the `video` element. Here's an example of using a `video` element with the `loop`, `controls`, and `muted` attributes. -Add the `autoplay` attribute to the opening `video` tag so the video plays automatically. +Add the `autoplay` attribute to the opening `video` tag so the video plays automatically. To interact with the example, you will need to enable the interactive editor. **NOTE**: The `width` attribute is being used here to make the video smaller and fit better in the preview window. You will learn more about the `width` attribute in future lessons. diff --git a/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md b/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md index ecaea548e37..c9f98ae78c4 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-css-flexbox/672aa7f7284b235f46f7d4e9.md @@ -59,7 +59,7 @@ div { ::: -But if you add `display: flex` to the `main` container, the `div` elements will be rearranged to fit on the same row and they will shrink if necessary: +But if you add `display: flex` to the `main` container, the `div` elements will be rearranged to fit on the same row and they will shrink if necessary (to see the previews, enable the interactive editor): :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md index 7604aa4b7a7..1daa79dd80e 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/6729974ec29be33cb00eb54d.md @@ -17,7 +17,7 @@ The `form` element in HTML is used to gather user information, such as names and The `action` attribute specifies where the form data will be sent upon submission. To collect specific information, like names and email addresses, you would use the `input` element. Here is an example of using an `input` element. -Interact with the `input` element in the preview window by typing in your name in the field. +Enable the interactive editor and interact with the `input` element in the preview window by typing in your name in the field. :::interactive_editor @@ -31,7 +31,7 @@ Interact with the `input` element in the preview window by typing in your name i `input` elements are void elements and do not have closing tags. The `type` attribute defines the data type expected from the user. In this case, the data would be plaintext. To add a label for the input, you would use a `label` element. Here is an example of using a `label` element with the text of `Full Name:`. -Click on the text `Full Name:` in the preview window and you will see the input go into focus. +Click on the text `Full Name:` in the preview window and you will see the input go into focus. To interact with the example, you will need to enable the interactive editor. :::interactive_editor @@ -48,7 +48,7 @@ Click on the text `Full Name:` in the preview window and you will see the input By nesting an `input` inside a `label` element, you create an implicit association between the `label` and the `input` field. The term "implicit" refers to something that is understood or inferred without needing to be explicitly stated or defined with additional attributes or elements. To explicitly associate a `label` with an `input`, you can use the `for` attribute. Here is an example of using the `for` attribute for an email address label. -Interact with the `input` element in the preview window by typing in a fake email address like `jane@example.com`. +Interact with the `input` element in the preview window by typing in a fake email address like `jane@example.com`. To interact with the example, you will need to enable the interactive editor. :::interactive_editor @@ -63,7 +63,7 @@ Interact with the `input` element in the preview window by typing in a fake emai When using an explicit association, the values for the `for` attribute and `id` need to be the same. In this case, the values are both set to `email`. The `email` type in the input provides basic validation for correctly formatted email addresses. If you want to show additional hints to the users about the expected input, you can use the `placeholder` attribute. Here is an example using the `placeholder` attribute inside the email input. -Click on the email input and start typing in an email and you will see the placeholder text go away. +Enable the interactive editor, click on the email input and start typing in an email and you will see the placeholder text go away. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md index b98eed0e409..bd93c639fde 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cd3d59756726657efb8.md @@ -21,7 +21,8 @@ Other examples of using the `button` element include submitting a form, showing By default, the button will not do anything when activated. However, you can add some JavaScript code to make the button interactive, such as showing an alert in this case. -Click on the `Show Alert` button to see an alert pop up on the screen. +Click on the `Show Alert` button to see an alert pop up on the screen. To interact with the example, you will need to enable the interactive editor. + **NOTE**: This interactive example is using JavaScript but you don't need to worry about understanding the JavaScript code. You will learn about JavaScript in future modules. @@ -55,7 +56,7 @@ Another possible value for the `type` attribute is the `submit` value. Here is a Inside this `form` element, there is a `label` and `input` element for the user's email address. When the user clicks on the submit button, their data will be sent to the server and will be processed. The third possible value for the `type` attribute is the `reset` value. Here is an example of a `form` element with reset and submit buttons. -Interact with the email input in the preview window by providing a fake email address. Then click on the reset button to see your email disappear from the field. +Enable the interactive editor and interact with the email input in the preview window by providing a fake email address. Then click on the reset button to see your email disappear from the field. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md index cb42e815659..95151636bdd 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-forms/672a4cf959443073a6774908.md @@ -21,7 +21,7 @@ The first state would be considered the `default` state. The default state of an When the user clicks on a form control or selects it with the keyboard's tab key, then that means it is in the `focused` state. When an input is in the `focused` state, most browsers will show a blue highlighted border around the input. But you can choose to add additional styles in CSS. -Click on any part of the whitespace in the preview window and then press the `tab` key to see the focus state. +Click on any part of the whitespace in the preview window and then press the `tab` key to see the focus state. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -33,7 +33,7 @@ Click on any part of the whitespace in the preview window and then press the `ta Another form state is the `disabled` state. This state shows users that an input cannot be focused or activated. -Try clicking on the email input and you will notice that it will not focus anymore. +Enable the interactive editor and try clicking on the email input and you will notice that it will not focus anymore. :::interactive_editor @@ -47,7 +47,7 @@ Similar to the `focused` state, you can choose to add additional styles for the Another type of form state is the `readonly` state. This is when a form control, like an input, is not editable by the user. Here is an example of setting an email input to read-only. The `value` attribute is used to set the value shown inside the input field. -Try editing the current value of `example@email.com` in the preview window, and you will notice that is not possible. +Enable the interactive editor and try editing the current value of `example@email.com` in the preview window, and you will notice that is not possible. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md b/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md index f4dff1e3fe7..1bbc7a38d82 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-images-and-svgs/6716825aff3434a71fdc3e99.md @@ -15,7 +15,7 @@ An SVG is a different kind of image. SVG stands for a scalable vector graphic. A SVGs specifically have the added benefit of storing data in XML. This means you can use them directly in your code as raw HTML with the `svg` element. It also means you can programmatically change the color of the image. -To change the smiley face to red, change the `fill="yellow"` to `fill="red"`. +To change the smiley face to red, enable the interactive editor and change the `fill="yellow"` to `fill="red"`. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md b/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md index 28b292322a6..f30dbfc05ef 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-links/6716744f7245947a3dd60009.md @@ -9,7 +9,7 @@ dashedName: what-are-the-different-target-attribute-types You may have seen the `target` attribute on anchor elements, or links. This important attribute tells the browser where to open the URL for the anchor element. -Click on the link and you will be directed to the freeCodeCamp homepage in a new browser tab. +Enable the interactive editor, click on the link and you will be directed to the freeCodeCamp homepage in a new browser tab. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md b/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md index c88e428f68b..3cb34488841 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-links/67168323932391a9ee0d3a9e.md @@ -11,7 +11,7 @@ You may have seen a link on a web page become purple after you click it. This is The first is the default state, which is `:link`. This state represents a link which the user has not visited, clicked, or interacted with yet. You can think of this state as providing the base styles for all links on your page. The other states build on top of it. -Take a look at the link in the preview window. It should be the default color of blue which represents the default state. If you click on it, then it will turn purple. +Enable the interactive editor and take a look at the link in the preview window. It should be the default color of blue which represents the default state. If you click on it, then it will turn purple. :::interactive_editor @@ -23,7 +23,7 @@ Take a look at the link in the preview window. It should be the default color of The second state is `:visited`, which applies when a user has already visited the page being linked to. By default, this turns the link purple - but you can leverage CSS to provide a different visual indication to the user. This is helpful to let someone know they have already read a portion of your documentation. Or, that the site is one they can trust because they have used it before. -Click on the link in the preview window and you should see that the visited link changes to the color brown. +Click on the link in the preview window and you should see that the visited link changes to the color brown. To see the previews, you will need to enable the interactive editor. **NOTE**: Some CSS has been provided for this interactive example so you can see the changes in the link styles. Don't worry about trying to understand the CSS code because you will learn what it all means in future modules. @@ -49,7 +49,7 @@ a:visited { The third state is `:hover`. This state applies when a user is hovering their cursor over a link. This state is helpful for providing extra attention to a link, to ensure a user actually intends to click it. -Hover your mouse over the link and you will see the color change to red. +Enable the interactive editor and try hovering your mouse over the link. You will see the color change to red. :::interactive_editor @@ -73,7 +73,7 @@ a:hover { Then we have `:focus`. This state applies when we focus on a link. -Click on any portion of the whitespace in the preview window and then press `tab` on your keyboard. You should see the link change to green. +Click on any portion of the whitespace in the preview window and then press `tab` on your keyboard. You should see the link change to green. To see the previews, you will need to enable the interactive editor. :::interactive_editor @@ -97,7 +97,7 @@ a:focus { And finally, we have `:active`. This state applies to links that are being activated by the user. This typically means clicking on the link with the primary mouse button by left clicking, in most cases. This state can be helpful for showing a user that the element they clicked on is interactive. -Click on the link and you should see the link turn to black. This happens pretty quickly so you might need to click on it a few times to see the color change. +Enable the interactive editor and click on the link. You should see the link turn to black. This happens pretty quickly so you might need to click on it a few times to see the color change. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md b/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md index 3428f7ca045..0f803a691a1 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-media/6716743531fc9a797351c21e.md @@ -17,7 +17,7 @@ With replaced elements, you can control the position, or layout of an element. B The element itself is replaced with the external object: the image. Your CSS can control things like the positioning of the image, or apply a filter to it, but you cannot actually modify the image itself. A more robust example might be the `iframe` element, which embeds an external site on your web page. -Here is an example of using the `iframe` element for a popular YouTube video on the freeCodeCamp channel. If you want to see different videos in the preview window, change the value of the `src` attribute to a video of your choosing. +Here is an example of using the `iframe` element for a popular YouTube video on the freeCodeCamp channel. If you want to see different videos in the preview window, change the value of the `src` attribute to a video of your choosing. To see the previews, you will need to enable the interactive editor. **NOTE**: Don't worry about the extra attributes mentioned in the interactive example like `referrerpolicy` and `allowfullscreen`. You will learn more about working with `iframe` elements in a future workshop. @@ -31,7 +31,7 @@ Here is an example of using the `iframe` element for a popular YouTube video on Other common examples of using the `iframe` element would be to embed maps onto the page. Here is an example of an embedded map. -Try playing around with the map itself by zooming in/out. +Enable the interactive editor and try playing around with the map itself by zooming in/out. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md index b391f7ebae5..cdea4ed01a6 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-media/671682b3983489a819507553.md @@ -9,7 +9,7 @@ dashedName: how-do-you-embed-videos-onto-your-page-using-the-iframe-element In a prior lesson, you were first introduced to the `iframe` element. In this lesson, you will learn more about how to work with the `iframe` element. This element stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. That HTML content could be a video, map, another HTML element, or even other web pages. -Here's an example of embedding a popular freeCodeCamp course from YouTube. To see a different video, change the `src` value to a video of your choosing. +Here's an example of embedding a popular freeCodeCamp course from YouTube. To see a different video, enable the interactive editor and change the `src` value to a video of your choosing. :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md index a5b1dc341e1..8b3425f6a2c 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672bb83c3a9906945536cff2.md @@ -17,7 +17,7 @@ This means that if you set an element's height to `100vh`, it will occupy the fu These units are especially handy when you want to create full-screen layouts or elements that maintain a specific proportion of the screen. -For example, you might want to use them to create a hero section that always fills the entire screen: +For example, you might want to use them to create a hero section that always fills the entire screen (to interact with the example, you will need to enable the interactive editor). :::interactive_editor @@ -60,7 +60,7 @@ This CSS ensures that the hero section will always be exactly the size of the vi `vh` and `vw` units can also be used for typography to create responsive text sizes. -Try adjusting the size of the preview window to see how the text scales with the viewport size: +Enable the interactive editor and try adjusting the size of the preview window to see how the text scales with the viewport size: :::interactive_editor diff --git a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md index 23c2735443f..7d95dc7b9e0 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-specialized-semantic-elements/672995ffdfd2f337f5f215f8.md @@ -9,7 +9,7 @@ dashedName: how-do-you-display-mathematical-equations-and-chemical-formulas-in-h The superscript element is used to display a piece of text as a superscript. A superscript is a symbol or letter printed above the normal line of text. -Here is an example using the superscript element to illustrate exponents: +Here is an example using the superscript element to illustrate exponents (to see the previews, enable the interactive editor): :::interactive_editor @@ -21,7 +21,7 @@ Here is an example using the superscript element to illustrate exponents: In this example, the number 2 is wrapped in `sup` tags to represent the superscript inside the paragraph. In the preview window, you will see that the second number 2 is smaller and slightly higher than the first number 2. -Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering: +Common use cases for the superscript element would include exponents, superior lettering, and ordinal numbers. Here is an example using the superscript element for superior lettering (to see the previews, enable the interactive editor): :::interactive_editor @@ -39,7 +39,7 @@ It is important to note that the superscript element should only be used for typ To represent chemical equations inside HTML, you would use the subscript element. This element uses a subscript which displays a lowered baseline using smaller text. -Here is an example of using the subscript element to show the chemical representation for carbon dioxide. +Here is an example of using the subscript element to show the chemical representation for carbon dioxide (to see the previews, enable the interactive editor): :::interactive_editor