+ {!this.state.videoIsLoaded ? (
+
+
+
+
+ ) : null}
+ {title}
+Assignments
+
+ {assignments.map((assignment, index) => (
+
+ ))}
+
{' '}
+
+ )}
+ Question
+
+ {answers.map((option, index) => (
+
+ ))}
+
+
+ {this.state.isWrongAnswer && (
+ {t('learn.wrong-answer')}
+ )}
+ {!this.state.allAssignmentsCompleted &&
+ assignments.length > 0 && (
+ <>
+
+ {t('learn.assignment-not-complete')} + + )} +
+ + {t('learn.assignment-not-complete')} + + )} +
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
`. + +Closing tags tell the browser where an element ends. They are almost the same as opening tags; the only difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: `
`. + +A full paragraph element looks like this: + +
+
+You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
+
+There are some HTML elements that do not have a closing tag. These elements often look like this: `` or `
` or `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +Add the following to the `body` of the `index.html` page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a `href` (hyperlink reference) attribute to the opening anchor tag. The value of the `href` attribute is the destination you want your link to go to. + +Add the following `href` attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. + +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Links video above. + +## --text-- + +What HTML tag is used to create a link? + +## --answers-- + +`` + +--- + +`` + +--- + +`
- `
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
new file mode 100644
index 00000000000..0c69cc1981b
--- /dev/null
+++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md
@@ -0,0 +1,58 @@
+---
+id: 637f703572c65bc8e73dfe35
+videoId: tsEQgGjSmkM
+title: Links and Images Question B
+challengeType: 15
+dashedName: links-and-images-question-b
+---
+# --description--
+
+To get some practice using links and images throughout this lesson you need an HTML project to work with.
+
+- Create a new directory named odin-links-and-images.
+
+- Within that directory, create a new file named index.html.
+
+- Fill in the usual HTML boilerplate.
+
+- finally, add the following h1 to the body: `
Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. +Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- +## --text-- + +What is an attribute? +## --answers-- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s closing tag. + +--- + +An HTML attribute is used to tell the browser what the element contains. + +--- + +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md new file mode 100644 index 00000000000..8270794a1ea --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md @@ -0,0 +1,59 @@ +--- +id: 637f703072c65bc8e73dfe34 +videoId: tsEQgGjSmkM +title: Links and Images Question C +challengeType: 15 +dashedName: links-and-images-question-c +--- +# --description-- + +To get some practice using links and images throughout this lesson you need an HTML project to work with. + +- Create a new directory named odin-links-and-images. + +- Within that directory, create a new file named index.html. + +- Fill in the usual HTML boilerplate. + +- finally, add the following h1 to the body: `Homepage
` + +## Anchor Elements +To create a link in HTML, you use the anchor element. An anchor element is defined by wrapping the text or another HTML element you want to be a link with an `` tag. +Add the following to the body of the index.html page you created and open it in the browser: + +```html +click me +``` + +You may have noticed that clicking this link doesn’t do anything. This is because an anchor tag on its own won’t know where you want to link to. You have to tell it a destination to go to. You do this by using an HTML attribute. +An HTML attribute gives additional information to an HTML element and always goes in the element’s opening tag. An attribute is usually made up of two parts: a name, and a value; however, not all attributes require a value. In your case, you need to add a href (hyperlink reference) attribute to the opening anchor tag. The value of the href attribute is the destination you want your link to go to. +Add the following href attribute to the anchor element you created previously and try clicking it again, don’t forget to refresh the browser so the new changes can be applied. + +```html +click me +``` + +By default, any text wrapped with an anchor tag without a `href` attribute will look like plain text. If the `href` attribute is present, the browser will give the text a blue color and underline it to signify it is a link. +It’s worth noting you can use anchor tags to link to any kind of resource on the internet, not just other HTML documents. You can link to videos, pdf files, images, and so on, but for the most part, you will be linking to other HTML documents. + +# --question-- + +## --text-- + +What attribute tells links where to go to? + +## --answers-- + +`src` + +--- + +`href` + +--- + +`link` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md new file mode 100644 index 00000000000..358954ad698 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md @@ -0,0 +1,111 @@ +--- +id: 637f702872c65bc8e73dfe33 +videoId: ta3Oxx7Yqbo +title: Links and Images Question D +challengeType: 15 +dashedName: links-and-images-question-d +--- +# --description-- + + +Generally, there are two kinds of links you will create: + +- Links to pages on other websites on the internet + +- Links to pages located on your own websites + + +## Absolute Links +Links to pages on other websites on the internet are called absolute links. A typical absolute link will be made up of the following parts: `protocol://domain/path`. An absolute link will always contain the protocol and domain of the destination. + +You’ve already seen an absolute link in action. The link you created to The Odin Project’s About page earlier was an absolute link as it contains the protocol and domain. + +`https://www.theodinproject.com/about` + +## Relative Links +Links to other pages within your own website are called relative links. Relative links do not include the domain name, since it is another page on the same site, it assumes the domain name will be the same as the page you created the link on. + +Relative links only include the file path to the other page, relative to the page you are creating the link on. This is quite abstract, let’s see this in action using an example. + +Within the `odin-links-and-images` directory, create another HTML file named `about.html` and paste the following code into it: + +```html + + + + +About Page
+ + +``` + +Back in the index page, add the following anchor element to create a link to the about page: + +```html + +Homepage
+ click me + + About + +``` + +Open the index file in a browser and click on the about link to make sure it is all wired together correctly. Clicking the link should go to the about page you just created. + +This works because the index and about page are in the same directory. That means you can simply use its name (`about.html`) as the link’s href value. + +But you will usually want to organize your website directories a little better. Normally you would only have the `index.html` at the root directory and all other HTML files in their own directory. + +Create a directory named `pages` within the `odin-links-and-images` directory and move the `about.html` file into this new directory. + +Refresh the index page in the browser and then click on the about link. It will now be broken. This is because the location of the about page file has changed. + +To fix this, you just need to update the about link `href` value to include the `pages/` directory since that is the new location of the about file relative to the index file. + +```html + +Homepage
+ About + +``` + +Refresh the index page in the browser and try clicking the about link again, it should now be back in working order. + +In many cases, this will work just fine; however, you can still run into unexpected issues with this approach. Prepending `./` before the link will in most cases prevent such issues. By adding `./` you are specifying to your code that it should start looking for the file/directory relative to the **current** directory. + +```html + +Homepage
+ About + +``` + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML File Structure video above. + +## --text-- + +What is the difference between an absolute and a relative link? + +## --answers-- + +An absolute link is a link to another page on the current website. A relative link is a link to another website. + +--- + +An absolute link is a link to another website. A relative link is a link another page on the current website. + +--- + +There is no difference between absolute and relative links. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md new file mode 100644 index 00000000000..e83d656458f --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md @@ -0,0 +1,97 @@ +--- +id: 637f702372c65bc8e73dfe32 +videoId: 0xoztJCHpbQ +title: Links and Images Question E +challengeType: 15 +dashedName: links-and-images-question-e +--- +# --description-- + +Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element. + +To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## `Alt` attribute
+
+Besides the `src` attribute, every image element should also have an `alt` (alternative text) attribute.
+
+The `alt` attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an `alt` attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Watch Kevin Powell’s HTML Images Video above.
+
+## --text--
+
+Which tag is used to display an image?
+
+## --answers--
+
+``
+
+---
+
+``
+
+---
+
+`Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+What two attributes do images always need to have?
+
+## --answers--
+
+`href` and `alt`
+
+---
+
+`name` and `href`
+
+---
+
+`alt` and `src`
+
+## --video-solution--
+
+3
diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
new file mode 100644
index 00000000000..a64b4b80e38
--- /dev/null
+++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md
@@ -0,0 +1,93 @@
+---
+id: 637f701572c65bc8e73dfe30
+videoId: 0xoztJCHpbQ
+title: Links and Images Question G
+challengeType: 15
+dashedName: links-and-images-question-g
+---
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --text--
+
+How do you access a parent directory in a filepath?
+
+## --answers--
+
+`../`
+
+---
+
+`./`
+
+---
+
+`.../`
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
new file mode 100644
index 00000000000..21c05af224b
--- /dev/null
+++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md
@@ -0,0 +1,97 @@
+---
+id: 637f700b72c65bc8e73dfe2f
+videoId: 0xoztJCHpbQ
+title: Links and Images Question H
+challengeType: 15
+dashedName: links-and-images-question-h
+---
+# --description--
+
+Websites would be fairly boring if they could only display text. Luckily HTML provides a wide variety of elements for displaying all sorts of different media. The most widely used of these is the image element.
+
+To display an image in HTML you use the `Homepage
+ click me + + About + +
+
+```
+
+Save the `index.html` file and open it in a browser to view Charles in all his glory.
+
+
+## Parent Directories
+
+What if you want to use the dog image in the about page? You would first have to go up one level out of the pages directory into its parent directory so you could then access the images directory.
+
+To go to the parent directory you need to use two dots in the relative filepath like this: `../.` Let’s see this in action, within the body of the `about.html` file, add the following image below the heading you added earlier:
+
+```html
+
+```
+
+To break this down:
+
+- First, you are going to the parent directory of the pages directory which is `odin-links-and-images`.
+
+- Then, from the parent directory, you can go into the `images` directory.
+
+- Finally, you can access the `dog.jpg` file.
+
+Using the metaphor we used earlier, using `../` in a filepath is kind of like stepping out from the room you are currently in to the main hallway so you can go to another room.
+
+## Alt attribute
+
+Besides the src attribute, every image element should also have an alt (alternative text) attribute.
+
+The alt attribute is used to describe an image. It will be used in place of the image if it cannot be loaded. It is also used with screen readers to describe what the image is to visually impaired users.
+
+This is how the The Odin Project logo example you used earlier looks with an alt attribute included:
+
+
+# --question--
+
+## --assignment--
+
+Read about the four main image formats that can be used on the web.
+
+## --text--
+
+What are the four main image formats that you can use for images on the web?
+
+## --answers--
+
+TIFF, GIF, PNG, and SVG.
+
+---
+
+JPG, PNG, GIF, and SVG.
+
+---
+
+JPG, PDF, SVG, and GIF.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
new file mode 100644
index 00000000000..7f7926e3df6
--- /dev/null
+++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md
@@ -0,0 +1,207 @@
+---
+id: 6391d1a4f7ac71efd0621380
+title: Build a Recipe Page Project
+challengeType: 14
+dashedName: project-create-a-recipe-page
+---
+
+# --description--
+
+The website will consist of a main index page which will have links to a few recipes. The website won’t look very pretty by the time you’ve finished.
+
+**User Stories:**
+
+1. Your recipe page should contain a `DOCTYPE` tag.
+1. Your recipe page should include an `html` element with a `head` and `body` element as children.
+1. You should have a `title` element within the `head` element with the text `The Odin Recipes`.
+1. You should see an `h1` element that has the text `Creamy Chocolate Fudge`.
+1. You should see an image with the url `*placeholder-fcc-cdn*` with a fitting `alt` text.
+1. There should be an `h2` element with the text `Description` under the image.
+1. You should see a couple of paragraphs under `Description` that describe the recipe.
+1. There should be an `h2` element with the text `Ingredients`
+1. Under the `Ingredients` heading there should be an unordered list with the ingredients needed for the recipe.
+1. Under the list of ingredients add another heading called `Steps`.
+1. You should see an ordered list with a couple of steps needed to complete the recipe.
+1. Under the steps there should be an `h2` element with the text `More Recipes`
+1. You should see a couple of links to other recipes inside an unordered list which has a couple of list items with anchor elements within.
+1. These anchor elements should have `href` attribute with the value set to `#`
+
+# --hints--
+
+You should have a `DOCTYPE` tag.
+
+```js
+assert(code.match(//gi));
+```
+
+You should have a `html` element with `head` and `body` element.
+
+```js
+const html = document.querySelectorAll('html')[0];
+const head = document.querySelectorAll('html > head')[0];
+const body = document.querySelectorAll('html > body')[0];
+
+assert(html && head && body);
+```
+
+You should have a `title` element within the `head` element that contains the text
+`The Odin Recipes`.
+
+```js
+assert(document.querySelectorAll('HEAD > TITLE')[0].innerText == 'The Odin Recipes');
+```
+
+You should have a `h1` element within your `body` element that contains the text
+`Creamy Chocolate Fudge`.
+
+```js
+assert(document.querySelectorAll('BODY > H1')[0].innerText == 'Creamy Chocolate Fudge');
+```
+
+You should have an image with the url `*placeholder-fcc-cdn*` with an `alt` attribute that has
+a fitting text.
+
+```js
+const img = document.querySelectorAll('IMG')[0];
+
+assert(img && img.alt !='' && img.src === 'https://i.imgur.com/p0J5baJ.jpg')
+```
+
+You should have an `h2` element with the text `Description`.
+
+```js
+const h2 = document.querySelectorAll('H2')[0];
+
+assert(h2.innerText == 'Description');
+```
+
+You should have at least two `p` elements describing the recipe.
+
+```js
+const paragraphs = document.querySelectorAll('P');
+
+assert(paragraphs.length > 1);
+```
+
+You should have an `h2` element with the text `Ingredients`.
+
+```js
+const h2 = document.querySelectorAll('H2')[1];
+
+assert(h2.innerText == 'Ingredients');
+```
+
+You should have an unordered list `
+