From df53c7778cf846163cd44571f082a13dbd37ede9 Mon Sep 17 00:00:00 2001 From: Sem Bauke Date: Thu, 19 Jan 2023 13:55:26 +0100 Subject: [PATCH] feat: integrate The Odin Project (#48617) * feat: integrate the odin project * feat: add assignment to markdown parser * feat: add assignment logic * fix: doe not always show assignment block * fix: some other stuff * fix: introdiction to html and css questions * fix: remove assignments after first question * fix: update snapshots and tests * feat: create rest of HTML foundation course structure * feat: meta file * feat: add descriptions to 'html boiler plate' questions * feat: add description for 'working with text and list items' * fix: multiple logic issues * fix: make linter happy * feat: add description for 'links and images' questions * fix: add assignments to Joi schema * fix: tests * fix: schema * fix: add help category * fix: change to possessive wording * fix: set upcoming change to true in meta file * fix: spell unordered and ordered correctly * fix: switch order in meta * fix: spell boilerplate correctly * feat: add final project * chore: add more tests to the final project * fix: question spelling * Apply suggestions from code review Co-authored-by: Naomi Carrigan * Apply suggestions from code review Co-authored-by: Naomi Carrigan * Apply suggestions from code review Co-authored-by: Naomi Carrigan * Apply suggestions from code review Co-authored-by: Naomi Carrigan * Apply suggestions from code review Co-authored-by: Naomi Carrigan * Apply suggestions from code review Co-authored-by: Naomi Carrigan * fix: translation * Update client/i18n/locales/english/translations.json Co-authored-by: Oliver Eyton-Williams * fix: create new challenge type * fix: get the new challenge type working and remove ol css * fix: translation location * fix: add challenge type to epic * fix: set correct video * fix: max challengeType number * fix: spelling/grammar errors in project * fix: check if anchor tags is empty * Apply suggestions from code review Co-authored-by: Oliver Eyton-Williams * Update tools/challenge-parser/parser/plugins/add-video-question.js Co-authored-by: Oliver Eyton-Williams * chore: multiple suggestions * chore: separate assignments into different plugin * Apply suggestions from code review Co-authored-by: Kristofer Koishigawa * fix: dubble answer header after review * fix: issue with Gatsby hopefully * fix: add assignments to Gatsby's Challenge schema * Update curriculum/schema/challengeSchema.js Co-authored-by: Oliver Eyton-Williams Co-authored-by: Naomi Carrigan Co-authored-by: Oliver Eyton-Williams Co-authored-by: Kristofer Koishigawa --- client/gatsby-node.js | 44 +- client/i18n/locales/english/intro.json | 4 + client/i18n/locales/english/translations.json | 1 + client/src/redux/prop-types.ts | 7 +- client/src/templates/Challenges/odin/Show.tsx | 427 ++++++++++++++++++ client/src/templates/Challenges/odin/show.css | 28 ++ .../Challenges/redux/completion-epic.js | 1 + .../Challenges/{video/show.css => video.css} | 0 .../src/templates/Challenges/video/Show.tsx | 2 +- client/utils/challenge-types.js | 10 +- client/utils/gatsby/challenge-page-creator.js | 8 +- client/utils/help-category-map.json | 1 + .../_meta/the-odin-project/meta.json | 124 +++++ .../elements-and-tags-question-a.md | 53 +++ .../elements-and-tags-question-b.md | 49 ++ .../html-boilerplate-question-a.md | 55 +++ .../html-boilerplate-question-b.md | 47 ++ .../html-boilerplate-question-c.md | 66 +++ .../html-boilerplate-question-d.md | 47 ++ .../introduction-to-html-css-question-a.md | 42 ++ .../introduction-to-html-css-question-b.md | 37 ++ .../introduction-to-html-css-question-c.md | 34 ++ .../introduction-to-html-css-question-d.md | 35 ++ .../links-and-images-question-a.md | 66 +++ .../links-and-images-question-b.md | 58 +++ .../links-and-images-question-c.md | 59 +++ .../links-and-images-question-d.md | 111 +++++ .../links-and-images-question-e.md | 97 ++++ .../links-and-images-question-f.md | 93 ++++ .../links-and-images-question-g.md | 93 ++++ .../links-and-images-question-h.md | 97 ++++ .../project-create-a-recipe-page.md | 207 +++++++++ ...d-ordered-and-unordered-list-question-a.md | 64 +++ ...d-ordered-and-unordered-list-question-b.md | 44 ++ ...d-ordered-and-unordered-list-question-c.md | 44 ++ .../working-with-text-question-a.md | 59 +++ .../working-with-text-question-b.md | 39 ++ .../working-with-text-question-c.md | 46 ++ .../working-with-text-question-d.md | 38 ++ .../working-with-text-question-e.md | 65 +++ .../working-with-text-question-f.md | 66 +++ .../working-with-text-question-g.md | 48 ++ curriculum/schema/challengeSchema.js | 3 +- .../index.acceptance.test.js.snap | 8 + tools/challenge-parser/parser/index.js | 2 + .../parser/plugins/add-assignment.js | 24 + .../parser/plugins/add-video-question.js | 3 +- 47 files changed, 2506 insertions(+), 50 deletions(-) create mode 100644 client/src/templates/Challenges/odin/Show.tsx create mode 100644 client/src/templates/Challenges/odin/show.css rename client/src/templates/Challenges/{video/show.css => video.css} (100%) create mode 100644 curriculum/challenges/_meta/the-odin-project/meta.json create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-c.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-d.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-e.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-g.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-h.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/project-create-a-recipe-page.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md create mode 100644 curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md create mode 100644 tools/challenge-parser/parser/plugins/add-assignment.js diff --git a/client/gatsby-node.js b/client/gatsby-node.js index 736fa2ff580..9e5b6d15772 100644 --- a/client/gatsby-node.js +++ b/client/gatsby-node.js @@ -270,6 +270,8 @@ exports.onCreatePage = async ({ page, actions }) => { } }; +// Take care to QA the challenges when modifying this. It has broken certain +// types of challenge in the past. exports.createSchemaCustomization = ({ actions }) => { const { createTypes } = actions; const typeDefs = ` @@ -280,6 +282,7 @@ exports.createSchemaCustomization = ({ actions }) => { challengeFiles: [FileContents] notes: String url: String + assignments: [String] } type FileContents { fileKey: String @@ -293,44 +296,3 @@ exports.createSchemaCustomization = ({ actions }) => { `; createTypes(typeDefs); }; - -// TODO: this broke the React challenges, not sure why, but I'll investigate -// further and reimplement if it's possible and necessary (Oliver) -// I'm still not sure why, but the above schema seems to work. -// Typically the schema can be inferred, but not when some challenges are -// skipped (at time of writing the Chinese only has responsive web design), so -// this makes the missing fields explicit. -// exports.createSchemaCustomization = ({ actions }) => { -// const { createTypes } = actions; -// const typeDefs = ` -// type ChallengeNode implements Node { -// question: Question -// videoId: String -// required: ExternalFile -// files: ChallengeFile -// } -// type Question { -// text: String -// answers: [String] -// solution: Int -// } -// type ChallengeFile { -// indexhtml: FileContents -// indexjs: FileContents -// indexjsx: FileContents -// } -// type ExternalFile { -// link: String -// src: String -// } -// type FileContents { -// key: String -// ext: String -// name: String -// contents: String -// head: String -// tail: String -// } -// `; -// createTypes(typeDefs); -// }; diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 73b513baf67..dd6e626afdb 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -778,6 +778,10 @@ "Attribute: Rosetta Code" ] }, + "the-odin-project": { + "title": "The Odin Project", + "intro": ["A description is to be determined"] + }, "project-euler": { "title": "Project Euler", "intro": [ diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json index b411171aafa..084ff6dff72 100644 --- a/client/i18n/locales/english/translations.json +++ b/client/i18n/locales/english/translations.json @@ -273,6 +273,7 @@ "add-subtitles": "Help improve or add subtitles", "wrong-answer": "Sorry, that's not the right answer. Give it another try?", "check-answer": "Click the button below to check your answer.", + "assignment-not-complete": "Please finish the assignments", "solution-link": "Solution Link", "github-link": "GitHub Link", "submit-and-go": "Submit and go to my next challenge", diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index 43e0a7620f4..d1c9565fe2c 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -47,7 +47,11 @@ export type MarkdownRemark = { }; }; -type Question = { text: string; answers: string[]; solution: number }; +type Question = { + text: string; + answers: string[]; + solution: number; +}; type Fields = { slug: string; blockName: string; tests: Test[] }; type Required = { link: string; @@ -115,6 +119,7 @@ export type ChallengeNode = { isPrivate: boolean; order: number; question: Question; + assignments: string[]; required: Required[]; solutions: { [T in FileKey]: FileKeyChallenge; diff --git a/client/src/templates/Challenges/odin/Show.tsx b/client/src/templates/Challenges/odin/Show.tsx new file mode 100644 index 00000000000..a57cd86fac2 --- /dev/null +++ b/client/src/templates/Challenges/odin/Show.tsx @@ -0,0 +1,427 @@ +// Package Utilities +import { Button, Grid, Col, Row } from '@freecodecamp/react-bootstrap'; +import { graphql } from 'gatsby'; +import React, { Component } from 'react'; +import Helmet from 'react-helmet'; +import { ObserveKeys } from 'react-hotkeys'; +import { TFunction, withTranslation } from 'react-i18next'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; +import type { Dispatch } from 'redux'; +import { createSelector } from 'reselect'; + +// Local Utilities +import Loader from '../../../components/helpers/loader'; +import Spacer from '../../../components/helpers/spacer'; +import LearnLayout from '../../../components/layouts/learn'; +import { ChallengeNode, ChallengeMeta } from '../../../redux/prop-types'; +import Hotkeys from '../components/Hotkeys'; +import VideoPlayer from '../components/VideoPlayer'; +import ChallengeTitle from '../components/challenge-title'; +import CompletionModal from '../components/completion-modal'; +import PrismFormatted from '../components/prism-formatted'; +import { + challengeMounted, + updateChallengeMeta, + openModal, + updateSolutionFormValues +} from '../redux/actions'; +import { isChallengeCompletedSelector } from '../redux/selectors'; + +// Styles +import './show.css'; +import '../video.css'; + +// Redux Setup +const mapStateToProps = createSelector( + isChallengeCompletedSelector, + (isChallengeCompleted: boolean) => ({ + isChallengeCompleted + }) +); +const mapDispatchToProps = (dispatch: Dispatch) => + bindActionCreators( + { + updateChallengeMeta, + challengeMounted, + updateSolutionFormValues, + openCompletionModal: () => openModal('completion') + }, + dispatch + ); + +// Types +interface ShowOdinProps { + challengeMounted: (arg0: string) => void; + data: { challengeNode: ChallengeNode }; + description: string; + isChallengeCompleted: boolean; + openCompletionModal: () => void; + pageContext: { + challengeMeta: ChallengeMeta; + }; + t: TFunction; + updateChallengeMeta: (arg0: ChallengeMeta) => void; + updateSolutionFormValues: () => void; +} + +interface ShowOdinState { + subtitles: string; + downloadURL: string | null; + selectedOption: number | null; + answer: number; + isWrongAnswer: boolean; + assignmentsCompleted: number; + allAssignmentsCompleted: boolean; + videoIsLoaded: boolean; +} + +// Component +class ShowOdin extends Component { + static displayName: string; + private _container: HTMLElement | null | undefined; + + constructor(props: ShowOdinProps) { + super(props); + this.state = { + subtitles: '', + downloadURL: null, + selectedOption: null, + answer: 1, + isWrongAnswer: false, + assignmentsCompleted: 0, + allAssignmentsCompleted: false, + videoIsLoaded: false + }; + + this.handleSubmit = this.handleSubmit.bind(this); + } + + componentDidMount(): void { + const { + challengeMounted, + data: { + challengeNode: { + challenge: { title, challengeType, helpCategory } + } + }, + pageContext: { challengeMeta }, + updateChallengeMeta + } = this.props; + updateChallengeMeta({ + ...challengeMeta, + title, + challengeType, + helpCategory + }); + challengeMounted(challengeMeta.id); + this._container?.focus(); + } + + componentDidUpdate(prevProps: ShowOdinProps): void { + const { + data: { + challengeNode: { + challenge: { title: prevTitle } + } + } + } = prevProps; + const { + challengeMounted, + data: { + challengeNode: { + challenge: { title: currentTitle, challengeType, helpCategory } + } + }, + pageContext: { challengeMeta }, + updateChallengeMeta + } = this.props; + if (prevTitle !== currentTitle) { + updateChallengeMeta({ + ...challengeMeta, + title: currentTitle, + challengeType, + helpCategory + }); + challengeMounted(challengeMeta.id); + } + } + + handleSubmit( + solution: number, + openCompletionModal: () => void, + assignments: string[] + ) { + const hasAssignments = assignments[0] != ''; + const completed = this.state.allAssignmentsCompleted; + const isCorrect = solution - 1 === this.state.selectedOption; + + if (isCorrect) { + this.setState({ + isWrongAnswer: false + }); + if (!hasAssignments || completed) openCompletionModal(); + } else { + this.setState({ + isWrongAnswer: true + }); + } + } + + handleOptionChange = ( + changeEvent: React.ChangeEvent + ): void => { + this.setState({ + isWrongAnswer: false, + selectedOption: parseInt(changeEvent.target.value, 10) + }); + }; + + handleAssignmentChange = ( + event: React.ChangeEvent, + totalAssignments: number + ): void => { + const assignmentsCompleted = event.target.checked + ? this.state.assignmentsCompleted + 1 + : this.state.assignmentsCompleted - 1; + const allAssignmentsCompleted = totalAssignments === assignmentsCompleted; + + this.setState({ + assignmentsCompleted, + allAssignmentsCompleted + }); + }; + + onVideoLoad = () => { + this.setState({ + videoIsLoaded: true + }); + }; + + render() { + const { + data: { + challengeNode: { + challenge: { + fields: { blockName }, + title, + description, + superBlock, + certification, + block, + translationPending, + videoId, + videoLocaleIds, + bilibiliIds, + question: { text, answers, solution }, + assignments + } + } + }, + openCompletionModal, + pageContext: { + challengeMeta: { nextChallengePath, prevChallengePath } + }, + t, + isChallengeCompleted + } = this.props; + + const blockNameTitle = `${t( + `intro:${superBlock}.blocks.${block}.title` + )} - ${title}`; + return ( + { + this.handleSubmit(solution, openCompletionModal, assignments); + }} + innerRef={(c: HTMLElement | null) => (this._container = c)} + nextChallengePath={nextChallengePath} + prevChallengePath={prevChallengePath} + > + + + + + + + {title} + + + +
+ {!this.state.videoIsLoaded ? ( +
+ +
+ ) : null} + +
+ + +

{title}

+ + + + {assignments[0] != '' && ( + <> +

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')} + + )} +
+ + + + + + + + + + ); + } +} + +ShowOdin.displayName = 'ShowOdin'; + +export default connect( + mapStateToProps, + mapDispatchToProps +)(withTranslation()(ShowOdin)); + +export const query = graphql` + query TheOdinProject($slug: String!) { + challengeNode(challenge: { fields: { slug: { eq: $slug } } }) { + challenge { + videoId + videoLocaleIds { + espanol + italian + portuguese + } + bilibiliIds { + aid + bvid + cid + } + title + description + challengeType + helpCategory + superBlock + certification + block + fields { + blockName + slug + } + question { + text + answers + solution + } + translationPending + assignments + } + } + } +`; diff --git a/client/src/templates/Challenges/odin/show.css b/client/src/templates/Challenges/odin/show.css new file mode 100644 index 00000000000..c0357a51862 --- /dev/null +++ b/client/src/templates/Challenges/odin/show.css @@ -0,0 +1,28 @@ +input[type='checkbox'] { + display: grid; + place-content: center; + -webkit-appearance: none; + appearance: none; + background-color: #fff; + min-width: 1.15em; + min-height: 1.15em; + max-width: 1.15em; + max-height: 1.15em; + margin-right: 15px; + border: 2px solid black; + border-radius: 0.15em; + transform: translateY(-0.075em); +} + +input[type='checkbox']::before { + content: ''; + width: 0.65em; + height: 0.65em; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em black; +} + +input[type='checkbox']:checked::before { + transform: scale(1); +} diff --git a/client/src/templates/Challenges/redux/completion-epic.js b/client/src/templates/Challenges/redux/completion-epic.js index 337cd9f96e7..c9314cf09a0 100644 --- a/client/src/templates/Challenges/redux/completion-epic.js +++ b/client/src/templates/Challenges/redux/completion-epic.js @@ -62,6 +62,7 @@ function submitModern(type, state) { const tests = challengeTestsSelector(state); if ( challengeType === 11 || + challengeType === 15 || (tests.length > 0 && tests.every(test => test.pass && !test.err)) ) { if (type === actionTypes.checkChallenge) { diff --git a/client/src/templates/Challenges/video/show.css b/client/src/templates/Challenges/video.css similarity index 100% rename from client/src/templates/Challenges/video/show.css rename to client/src/templates/Challenges/video.css diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx index 0f2d866c62a..db5cc4bbffb 100644 --- a/client/src/templates/Challenges/video/Show.tsx +++ b/client/src/templates/Challenges/video/Show.tsx @@ -30,7 +30,7 @@ import { import { isChallengeCompletedSelector } from '../redux/selectors'; // Styles -import './show.css'; +import '../video.css'; // Redux Setup const mapStateToProps = createSelector( diff --git a/client/utils/challenge-types.js b/client/utils/challenge-types.js index 5655b53143c..d0c665e1ade 100644 --- a/client/utils/challenge-types.js +++ b/client/utils/challenge-types.js @@ -14,6 +14,7 @@ const video = 11; const codeAllyPractice = 12; const codeAllyCert = 13; const multifileCertProject = 14; +const theOdinProject = 15; // individual exports exports.backend = backend; @@ -38,7 +39,8 @@ exports.challengeTypes = { video, codeAllyPractice, codeAllyCert, - multifileCertProject + multifileCertProject, + theOdinProject }; exports.isFinalProject = challengeType => { @@ -75,7 +77,8 @@ exports.viewTypes = { [video]: 'video', [codeAllyPractice]: 'codeAlly', [codeAllyCert]: 'codeAlly', - [multifileCertProject]: 'classic' + [multifileCertProject]: 'classic', + [theOdinProject]: 'odin' }; // determine the type of submit function to use for the challenge on completion @@ -97,7 +100,8 @@ exports.submitTypes = { [modern]: 'tests', [video]: 'tests', [codeAllyCert]: 'project.frontEnd', - [multifileCertProject]: 'tests' + [multifileCertProject]: 'tests', + [theOdinProject]: 'tests' }; // determine which help forum questions should be posted to diff --git a/client/utils/gatsby/challenge-page-creator.js b/client/utils/gatsby/challenge-page-creator.js index bcc334f56ec..13fdefe5116 100644 --- a/client/utils/gatsby/challenge-page-creator.js +++ b/client/utils/gatsby/challenge-page-creator.js @@ -32,13 +32,19 @@ const video = path.resolve( '../../src/templates/Challenges/video/Show.tsx' ); +const odin = path.resolve( + __dirname, + '../../src/templates/Challenges/odin/Show.tsx' +); + const views = { backend, classic, modern: classic, frontend, video, - codeAlly + codeAlly, + odin // quiz: Quiz }; diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 2452d3146bb..0a7f4eac9d0 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -42,6 +42,7 @@ "algorithms": "JavaScript", "data-structures": "JavaScript", "take-home-projects": "JavaScript", + "the-odin-project": "JavaScript", "rosetta-code": "JavaScript", "project-euler": "JavaScript", "scientific-computing-with-python": "Python", diff --git a/curriculum/challenges/_meta/the-odin-project/meta.json b/curriculum/challenges/_meta/the-odin-project/meta.json new file mode 100644 index 00000000000..a3f85b99c98 --- /dev/null +++ b/curriculum/challenges/_meta/the-odin-project/meta.json @@ -0,0 +1,124 @@ +{ + "name": "The Odin Project", + "isUpcomingChange": true, + "dashedName": "the-odin-project", + "order": 5, + "time": "", + "template": "", + "required": [], + "superBlock": "coding-interview-prep", + "challengeOrder": [ + [ + "6374f208de18c50e48ba767b", + "Introduction To HTML and CSS Question A" + ], + [ + "6376327e2724a688c04636e3", + "Introduction To HTML and CSS Question B" + ], + [ + "637633162724a688c04636e4", + "Introduction To HTML and CSS Question C" + ], + [ + "637633672724a688c04636e5", + "Introduction To HTML and CSS Question D" + ], + [ + "637f4e0e72c65bc8e73dfe1e", + "Elements and Tags Question A" + ], + [ + "637f4e1672c65bc8e73dfe1f", + "Elements and Tags Question B" + ], + [ + "637f4e1c72c65bc8e73dfe20", + "HTML Boilerplate Question A" + ], + [ + "637f4e2872c65bc8e73dfe21", + "HTML Boilerplate Question B" + ], + [ + "637f4e2f72c65bc8e73dfe22", + "HTML Boilerplate Question C" + ], + [ + "637f4e3672c65bc8e73dfe23", + "HTML Boilerplate Question D" + ], + [ + "637f4e5872c65bc8e73dfe27", + "Working With Text Question A" + ], + [ + "637f4e5f72c65bc8e73dfe28", + "Working With Text Question B" + ], + [ + "637f4e6672c65bc8e73dfe29", + "Working With Text Question C" + ], + [ + "637f4e6e72c65bc8e73dfe2a", + "Working With Text Question D" + ], + [ + "637f4e7972c65bc8e73dfe2b", + "Working With Text Question E" + ], + [ + "637f4e8072c65bc8e73dfe2c", + "Working With Text Question F" + ], + [ + "637f4e8772c65bc8e73dfe2d", + "Working With Text Question G" + ], + [ + "637f4e3e72c65bc8e73dfe24", + "Understand Ordered and Unordered List Question A" + ], + [ + "637f4e4672c65bc8e73dfe25", + "Understand Ordered and Unordered List Question B" + ], + [ + "637f4e5172c65bc8e73dfe26", + "Understand ordered and Unordered List Question C" + ], + [ + "637f704072c65bc8e73dfe36", + "Links and Images Question A" + ], + [ + "637f703572c65bc8e73dfe35", + "Links and Images Question B" + ], + [ + "637f703072c65bc8e73dfe34", + "Links and Images Question C" + ], + [ + "637f702872c65bc8e73dfe33", + "Links and Images Question D" + ], + [ "637f702372c65bc8e73dfe32", + "Links and Images Question E" + ], + [ "637f701c72c65bc8e73dfe31", + "Links and Images Question F" + ], + [ "637f701572c65bc8e73dfe30", + "Links and Images Question G" + ], + [ "637f700b72c65bc8e73dfe2f", + "Links and Images Question D" + ], + [ + "6391d1a4f7ac71efd0621380", + "Build a Recipe Page Project" + ] + ] +} \ No newline at end of file diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md new file mode 100644 index 00000000000..71767010b3c --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-a.md @@ -0,0 +1,53 @@ +--- +id: 637f4e0e72c65bc8e73dfe1e +videoId: LGQuIIv2RVA +title: Elements and Tags Question A +challengeType: 15 +dashedName: elements-and-tags-question-a +--- +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets `<>`. For example, an opening paragraph tag looks like this: `

`. + +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: + +element diagram + +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 ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s [Introduction to HTML video](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-) + +## --text-- + +What are HTML tags? + +## --answers-- + +HTML tags tell the browser what content an element contains. + +--- + +HTML tags tell the browser when to load its content. + +--- + +HTML tags tell the browser what content the next element contains. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md new file mode 100644 index 00000000000..3e36735f990 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/elements-and-tags-question-b.md @@ -0,0 +1,49 @@ +--- +id: 637f4e1672c65bc8e73dfe1f +videoId: LGQuIIv2RVA +title: Elements and Tags Question B +challengeType: 15 +dashedName: elements-and-tags-question-b +--- +# --description-- + +Almost all elements on an HTML page are just pieces of content wrapped in opening and closing HTML tags. + +Opening tags tell the browser this is the start of an HTML element. They are comprised of a keyword enclosed in angle brackets <>. For example, an opening paragraph tag looks like this: `

`. + +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: + +element diagram + +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 ``, but some can also be used without the closing forward slash such as `
` or ``. These are known as self-closing tags or empty elements because they don’t wrap any content. You will encounter a few of these in later lessons, but for the most part, elements will have both opening and closing tags. + +HTML has a vast list of predefined tags that you can use to create all kinds of different elements. It is important to use the correct tags for content. Using the correct tags can have a big impact on two aspects of your sites: how they are ranked in search engines; and how accessible they are to users who rely on assistive technologies, like screen readers, to use the internet. + +Using the correct elements for content is called semantic HTML. You will explore this in much more depth later on in the curriculum. + +# --question-- + +## --text-- + +What are the three parts of most HTML elements? + +## --answers-- + +An opening tag, self closing tag, and content. + +--- + +An opening tag, closing tag, and content. + +--- + +An opening tag, closing tag, and attribute. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md new file mode 100644 index 00000000000..8dadb99d7cc --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-a.md @@ -0,0 +1,55 @@ +--- +id: 637f4e1c72c65bc8e73dfe20 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question A +challengeType: 15 +dashedName: html-boilerplate-question-a +--- + +# --description-- + +To demonstrate an HTML boilerplate, you first need an HTML file to work with. + +Create a new folder on your computer and name it `html-boilerplate`. Within that folder create a new file and name it `index.html`. + +You’re probably already familiar with a lot of different types of files, for example doc, pdf, and image files. + +To let the computer know you want to create an HTML file, you need to append the filename with the `.html` extension as you have done when creating the `index.html` file. + +It is worth noting that you named your HTML file index. You should always name the HTML file that will contain the homepage of your websites `index.html`. This is because web servers will by default look for an index.html page when users land on your websites - and not having one will cause big problems. + +## The DOCTYPE + +Every HTML page starts with a doctype declaration. The doctype’s purpose is to tell the browser what version of HTML it should use to render the document. The latest version of HTML is HTML5, and the doctype for that version is simply ``. + +The doctypes for older versions of HTML were a bit more complicated. For example, this is the doctype declaration for HTML4: + +```html + +``` + +However, you probably won’t ever want to be using an older version of HTML, and so you’ll always use ``. + +Open the `index.html` file created earlier in your text editor and add `` to the very first line. + +# --question-- +## --text-- + +What is the purpose of the `DOCTYPE` declaration? + +## --answers-- + +It tells the browser which version of HTML to use to render the document. + +--- + +It tells the browser that this document uses JavaScript. + +--- + +It tells the browser the title of the document. + + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md new file mode 100644 index 00000000000..248f55b6089 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-b.md @@ -0,0 +1,47 @@ +--- +id: 637f4e2872c65bc8e73dfe21 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question B +challengeType: 15 +dashedName: html-boilerplate-question-b +--- + +# --description-- + +After you declare the doctype, you need to provide an `` element. This is what’s known as the root element of the document, meaning that every other element in the document will be a descendant of it. + +This becomes more important later on when you learn about manipulating HTML with JavaScript. For now, just know that the `html` element should be included on every HTML document. + +Back in the `index.html` file, let’s add the `` element by typing out its opening and closing tags, like so: + +```html + + + +``` + +## What is the lang attribute? +`lang` specifies the language of the text content in that element. This attribute is primarily used for improving accessibility of the webpage. It allows assistive technologies, for example screen readers, to adapt according to the language and invoke correct pronunciation. + +# --question-- + +## --text-- + +What is the `html` element? + +## --answers-- + +It is the root element in the document and tells the browser which version of HTML it should use. + +--- + +It is the root element in the document and all other elements should descend from it. + +--- + +It is the root element in the document and all other elements should come after it. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md new file mode 100644 index 00000000000..31d83ed2e63 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-c.md @@ -0,0 +1,66 @@ +--- +id: 637f4e2f72c65bc8e73dfe22 +videoId: LGQuIIv2RVA +title: HTML Boilerplate Question C +challengeType: 15 +dashedName: html-boilerplate-question-c +--- + +# --description-- + +The `` element is where you put important meta-information about your webpages, and stuff required for your webpages to render correctly in the browser. Inside the ``, you should not use any element that displays content on the webpage. + +## The Charset Meta Element +You should always have the `meta` tag for the charset encoding of the webpage in the head element: ``. + +Setting the encoding is very important because it ensures that the webpage will display special symbols and characters from different languages correctly in the browser. + +## Title Element +Another element you should always include in the head of an HTML document is the `title` element: + +```html +My First Webpage +``` + +The `title` element is used to give webpages a human-readable title which is displayed in your webpage’s browser tab. + +If you didn’t include a `title` element, the webpage’s title would default to its file name. In your case that would be `index.html`, which isn’t very meaningful for users; this would make it very difficult to find your webpage if the user has many browser tabs open. + +There are many more elements that can go within the `head` of an HTML document. However, for now it’s only crucial to know about the two elements you have covered here. You will introduce more elements that go into the `head` throughout the rest of the curriculum. + +Back in `index.html` file, let’s add a `head` element with a `charset` `meta` element and a `title` within it. The head element goes within the HTML element and should always be the first element under the opening `` tag: + + +```html + + + + + + My First Webpage + + +``` + +# --question-- + +## --text-- + +What is the purpose of the `head` element? + +## --answers-- + +The `head` element is used to display all elements that are displayed on the webpage. + +--- + +The `head` element is used to display important information about your webpage and is used to render web pages correctly with `meta` elements. + +--- + +The `head` element is used to display the header content on top of the webpage. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md new file mode 100644 index 00000000000..538a9389ee3 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/html-boilerplate-question-d.md @@ -0,0 +1,47 @@ +--- +id: 637f4e3672c65bc8e73dfe23 +videoId: V8UAEoOvqFg +title: HTML Boilerplate Question D +challengeType: 15 +dashedName: html-boilerplate-question-d +--- +# --description-- + +The final element needed to complete the HTML boilerplate is the `` element. This is where all the content that will be displayed to users will go - the text, images, lists, links, and so on. + +To complete the boilerplate, add a `body` element to the `index.html` file. The `body` element also goes within the `html` element and is always below the `head` element, like so: + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s brilliant Building your first web page video above. + +--- + +Build some muscle memory by deleting the contents of the `index.html` file and trying to write out all the boilerplate again from memory. Don’t worry if you have to peek at the lesson content the first few times if you get stuck. Just keep going until you can do it a couple of times from memory. + +--- + +Run your boilerplate through this [HTML validator](https://www.freeformatter.com/html-validator.html). Validators ensure your markup is correct and are an excellent learning tool, as they provide feedback on syntax errors you may be making often and aren’t aware of, such as missing closing tags and extra spaces in your HTML. + +## --text-- + +What is the purpose of the `body` element? + +## --answers-- + +This is where all important information about the webpage is displayed such as the `title` and `meta` tags. + +--- + +This is where you tell the browser how to render the webpage correctly. + +--- + +This is where all content will be displayed on the page such images, text, and links. + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md new file mode 100644 index 00000000000..445f8b22dc9 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-a.md @@ -0,0 +1,42 @@ +--- +id: 6374f208de18c50e48ba767b +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question A +challengeType: 15 +dashedName: introduction-to-html-and-css-question-a +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --assignment-- + +Read the HTML vs CSS vs JavaScript article. It is a quick overview of the relationships between HTML, CSS, and JavaScript. + +## --text-- + +Which of the following statements is true? + +## --answers-- + +CSS is used to create the basic structure of a webpage, and HTML is used to add style. + +--- + +HTML is used to create the basic structure of a webpage, and CSS is used to add style. + +--- + +HTML and CSS are used to add style to a webpage, and JavaScript is used to create the basic structure. + + +## --video-solution-- + +2 + + diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md new file mode 100644 index 00000000000..670bf102e4a --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-b.md @@ -0,0 +1,37 @@ +--- +id: 6376327e2724a688c04636e3 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question B +challengeType: 15 +dashedName: introduction-to-html-and-css-question-b +--- + +# --description-- + + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to add paragraphs of text on a webpage? + +## --answers-- + +CSS + +--- + +JavaScript + +--- + +HTML + + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md new file mode 100644 index 00000000000..2c50a29e74e --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-c.md @@ -0,0 +1,34 @@ +--- +id: 637633162724a688c04636e4 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question C +challengeType: 15 +dashedName: introduction-to-html-and-css-question-c +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. +# --question-- + +## --text-- + +Between HTML and CSS, which should you use to change the font and background color of a button? + +## --answers-- + +You should use CSS to change the background color and font of a button. + +--- + +You should use JavaScript to change the background color and font of a button. + +--- + +You should use HTML to change the background color and font of a button. + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md new file mode 100644 index 00000000000..ab0e34dcfe4 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/introduction-to-html-css-question-d.md @@ -0,0 +1,35 @@ +--- +id: 637633672724a688c04636e5 +videoId: LGQuIIv2RVA +title: Introduction To HTML and CSS Question D +challengeType: 15 +dashedName: introduction-to-html-and-css-question-d +--- + +# --description-- + +HTML and CSS are two languages that work together to create everything that you see when you look at something on the internet. HTML is the raw data that a webpage is built out of. All the text, links, cards, lists, and buttons are created in HTML. CSS is what adds style to those plain elements. HTML puts information on a webpage, and CSS positions that information, gives it color, changes the font, and makes it look great! + +Many helpful resources out there keep referring to HTML and CSS as programming languages, but if you want to get technical, labeling them as such is not quite accurate. This is because they are only concerned with presenting information. They are not used to program logic. JavaScript, which you will learn in the next section, is a programming language because it’s used to make webpages do things. Yet, there is quite a lot you can do with just HTML and CSS, and you will definitely need them both. Throughout our curriculum, the following lessons focus on giving you the tools you need to succeed once you reach JavaScript content. + +# --question-- + +## --text-- + +What is the difference between HTML, CSS, and JavaScript? + +## --answers-- + +HTML is for creating interactive elements, CSS is for the look and feel, and JavaScript is for creating the structure of a webpage. + +--- + +CSS is for the look and feel, JavaScript is for creating interactive elements, and HTML is for creating the structure of a webpage. + +--- + +JavaScript is for the look and feel, CSS is for creating the structure, and HTML is for creating interactive elements of a webpage. + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md new file mode 100644 index 00000000000..1f6c5ef99ce --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-a.md @@ -0,0 +1,66 @@ +--- +id: 637f704072c65bc8e73dfe36 +videoId: tsEQgGjSmkM +title: Links and Images Question A +challengeType: 15 +dashedName: links-and-images-question-a +--- +# --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-- + +## --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 + + + + + Odin Links and Images + + + +

    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 `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a `src` attribute which tells the browser where the image file is located. The `src` attribute works much like the `href` attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the `images` directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +

    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-- + +`` + +--- + +`` + +--- + +`` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md new file mode 100644 index 00000000000..60b2ba8191f --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/links-and-images-question-f.md @@ -0,0 +1,93 @@ +--- +id: 637f701c72c65bc8e73dfe31 +videoId: 0xoztJCHpbQ +title: Links and Images Question F +challengeType: 15 +dashedName: links-and-images-question-f +--- +# --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 `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +

    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 `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +

    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 `` element. Unlike the other elements you have encountered, the `` element is self-closing. Empty, self-closing HTML elements do not need a closing tag. + +Instead of wrapping content with an opening and closing tag, it embeds an image into the page using a src attribute which tells the browser where the image file is located. The src attribute works much like the href attribute for anchor tags. It can embed an image using both absolute and relative paths. + +For example, using an absolute path you can display an image located on The Odin Project site: + + + +To use images that you have on your own websites, you can use a relative path. + +- Create a new directory named `images` within the `odin-links-and-images` project. + +- Next, download [this image](https://unsplash.com/photos/Mv9hjnEUHR4/download?force=true&w=640) and move it into the images directory you just created. + +- Rename the image to `dog.jpg`. + +Finally add the image to the `index.html` file: + +```html + +

    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 `
      ` with some ingredients as the list items `
    • `. + +```js +const unorderedList = document.querySelectorAll('UL')[0]; +const listItems = document.querySelectorAll('UL > LI'); + +assert(unorderedList && listItems && listItems.length > 1); +``` + +You should have an `h2` element with the text `Steps`. + +```js +const h2 = document.querySelectorAll('H2')[2]; + +assert(h2.innerText == 'Steps'); +``` + +You should have a `
        ` with the the steps as the list items `
      1. `. + +```js +const orderedList = document.querySelectorAll('OL')[0]; +const listItems = document.querySelectorAll('OL > LI'); + +assert(orderedList && listItems && listItems.length > 1); +``` + +You should have an `h2` element with the text `More Recipes`. + +```js +const h2 = document.querySelectorAll('H2')[3]; + +assert(h2.innerText == 'More Recipes'); +``` + +You should have an unordered list `
          ` element with list items `
        • ` that contain `` tags which lead to other recipes. + +```js +const unorderedList = document.querySelectorAll('UL')[1]; +const listItems = unorderedList.querySelectorAll('LI'); + +const allAreListItems = unorderedList.children.length == listItems.length; + +const containsAnchors = [...listItems].every(function(listItem) { + return listItem.querySelector("a") !== null; +}); + +assert(unorderedList && allAreListItems && containsAnchors && listItems.length > 1); +``` + +Your anchor tags linking to the recipes should have a `href` attribute with the value set to `#` + +```js +const anchorTags = document.querySelectorAll("a"); + +const allAnchorsHaveHrefHash = [...anchorTags].every(function(anchorTag) { + return anchorTag.hasAttribute("href") && anchorTag.getAttribute("href") === "#"; +}); + +assert(allAnchorsHaveHrefHash && anchorTags.length > 0); +``` + +# --seed-- + +## --seed-contents-- + +```html + +``` + +```css + +``` + +## --solutions-- + +```html + + + + The Odin Recipes + + +

          Creamy Chocolate Fudge

          + A delicious chocolate fudge dessert +

          Description

          +

          This recipe is for a rich and creamy chocolate fudge that is sure to satisfy your sweet tooth. It's perfect for a special occasion or as a tasty treat for any time of the year.

          +

          This recipe is easy to follow and only requires a few simple ingredients. With just a few steps, you'll be able to create a delicious dessert that everyone will love.

          +

          Ingredients

          +
            +
          • 1 cup sugar
            • +
          • 1/2 cup unsalted butter
            • +
          • 1/4 cup milk
            • +
          • 1/4 cup cocoa powder
            • +
          • 1/4 cup chocolate chips
            • +
          • 1/4 tsp salt
            • +
          • 1 tsp vanilla extract
            • +
          +

          Steps

          +
            +
          1. In a medium saucepan, melt the butter over medium heat.
            2. +
          2. Add the sugar, milk, cocoa powder, and salt to the saucepan and stir until well combined.
            3. +
          3. Bring the mixture to a boil, stirring constantly, and then reduce the heat to low and simmer for 5 minutes.
            4. +
          4. Remove the saucepan from the heat and stir in the chocolate chips and vanilla extract until the chocolate is melted and the mixture is smooth.
            5. +
          5. Pour the fudge into a greased 8-inch square pan and let it cool completely before cutting into squares.
            6. +
          +

          More Recipes

          +           + + +``` diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md new file mode 100644 index 00000000000..db2821856ac --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-a.md @@ -0,0 +1,64 @@ +--- +id: 637f4e3e72c65bc8e73dfe24 +videoId: kcHKFZBVtf4 +title: Understand Ordered and Unordered List Question A +challengeType: 15 +dashedName: understand-ordered-and-unordered-list-question-a +--- +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `
            ` element, and each item within the list is created using the list item element `
          • `. + +Each list item in an unordered list begins with a bullet point: + + + +If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. + +Ordered lists are created using the `
              ` element. Each individual item in them is again created using the list item element `
            1. `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --assignment-- + +Watch the first three minutes of Kevin Powell's video on Ordered and Unordered lists above. + +--- + +Make an unordered shopping list of your favorite foods. + +--- + +Make an ordered list of todo’s you need to get done today. + +--- + +Make an unordered list of places you’d like to visit someday. + +--- + +Make an ordered list of your all time top 5 favorite video games or movies. + +## --text-- + +What HTML tag is used to create an unordered list? + +## --answers-- + +`
            2. ` + +--- + +`
                ` + +--- + +`
                  ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md new file mode 100644 index 00000000000..e76a6a5eb31 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-b.md @@ -0,0 +1,44 @@ +--- +id: 637f4e4672c65bc8e73dfe25 +videoId: LGQuIIv2RVA +title: Understand Ordered and Unordered List Question B +challengeType: 15 +dashedName: understand-ordered-and-unordered-list-question-b +--- +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `
                    ` element, and each item within the list is created using the list item element `
                  • `. + +Each list item in an unordered list begins with a bullet point: + + + +If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. + +Ordered lists are created using the `
                      ` element. Each individual item in them is again created using the list item element `
                    1. `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --text-- + +What HTML tag is used to create an ordered list? + +## --answers-- + +`
                        ` + +--- + +`
                      1. ` + +--- + +`
                          ` + +## --video-solution-- + +1 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md new file mode 100644 index 00000000000..a516984c0b6 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/understand-ordered-and-unordered-list-question-c.md @@ -0,0 +1,44 @@ +--- +id: 637f4e5172c65bc8e73dfe26 +videoId: LGQuIIv2RVA +title: Understand Ordered and Unordered List Question C +challengeType: 15 +dashedName: understand-ordered-and-unordered-list-question-c +--- +# --description-- + +If you want to have a list of items where the order doesn’t matter, like a shopping list of items that can be bought in any order, then you can use an unordered list. + +Unordered lists are created using the `
                            ` element, and each item within the list is created using the list item element `
                          • `. + +Each list item in an unordered list begins with a bullet point: + + + +If you instead want to create a list of items where the order does matter, like step-by-step instructions for a recipe, or your top 10 favorite TV shows, then you can use an ordered list. + +Ordered lists are created using the `
                              ` element. Each individual item in them is again created using the list item element `
                            1. `. However, each list item in an ordered list begins with a number instead: + + + +# --question-- + +## --text-- + +What HTML tag is used to create list items within both unordered and ordered lists? + +## --answers-- + +`
                                ` + +--- + +`
                              1. ` + +--- + +`
                                  ` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md new file mode 100644 index 00000000000..c5ea3792d82 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-a.md @@ -0,0 +1,59 @@ +--- +id: 637f4e5872c65bc8e73dfe27 +videoId: yqcd-XkxZNM +title: Working With Text Question A +challengeType: 15 +dashedName: working-with-text-question-a +--- +# --description-- + +What would you expect the following text to output on an HTML page? + +```html + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. + + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. + +``` + +It looks like two paragraphs of text, and so you might expect it to display in that way. However that is not the case, as you can see in the output below: + + + +When the browser encounters new lines like this in your HTML, it will compress them down into one single space. The result of this compression is that all of the text is clumped together into one long line. + +If you want to create paragraphs in HTML, you need to use the paragraph element, which will add a newline after each of your paragraphs. A paragraph element is defined by wrapping text content with a `

                                  ` tag. + +Changing our example from before to use paragraph elements fixes the issue: + + + +# --question-- + +## --assignment-- + +Watch and follow along to Kevin Powell’s HTML Paragraph and Headings Video above. + +## --text-- + +How do you create a paragraph in HTML? + +## --answers-- + +`

                                  This is a paragraph

                                  ` + +--- + +`

                                  This is a paragraph

                                  ` + +--- + +`This is a paragraph` + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md new file mode 100644 index 00000000000..2dba9270a58 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-b.md @@ -0,0 +1,39 @@ +--- +id: 637f4e5f72c65bc8e73dfe28 +videoId: yqcd-XkxZNM +title: Working With Text Question B +challengeType: 15 +dashedName: working-with-text-question-b +--- +# --description-- + +Headings are different from other HTML text elements: they are displayed larger and bolder than other text to signify that they are headings. + +There are 6 different levels of headings starting from `

                                  ` to `

                                  `. The number within a heading tag represents that heading’s level. The largest and most important heading is `h1`, while `h6` is the tiniest heading at the lowest level. + +Headings are defined much like paragraphs. For example, to create an `h1` heading, we wrap our heading text in a `

                                  ` tag. + + + +Using the correct level of heading is important as levels provide a hierarchy to the content. An `h1` heading should always be used for the heading of the overall page, and the lower level headings should be used as the headings for content in smaller sections of the page. + +# --question-- +## --text-- + +How many different levels of headings are there and what is the difference between them? + +## --answers-- + +There are 5 different levels of headings. `h5` is the smallest and least important heading, and `h1` is the largest and most important heading. + +--- + +There are 6 different levels of headings. `h6` is the largest and most important heading, and `h1` is the smallest and least important heading. + +--- + +There are 6 different levels of headings. `h1` is the largest and most important heading, and `h6` is the smallest and least important heading. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md new file mode 100644 index 00000000000..d0d5e42a90d --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-c.md @@ -0,0 +1,46 @@ +--- +id: 637f4e6672c65bc8e73dfe29 +videoId: gW6cBZLUk6M +title: Working With Text Question C +challengeType: 15 +dashedName: working-with-text-question-c +--- +# --description-- + +The `` element makes text bold. It also semantically marks text as important; this affects tools, like screen readers, that users with visual impairments will rely on to use your website. The tone of voice on some screen readers will change to communicate the importance of the text within a `strong` element. To define a `strong` element you wrap text content in a `` tag. + +You can use `strong` on its own: + + + +But you will probably find yourself using the `strong` element much more in combination with other text elements, like this: + + + +Sometimes you will want to make text bold without giving it an important meaning. You’ll learn how to do that in the CSS lessons later in the curriculum. + +# --question-- + +## --assignment-- + +Watch Kevin Powell’s HTML Bold and Italic Text Video above. + +## --text-- + +What element should you use to make text bold and important? + +## --answers-- + +`This is an important message` + +--- + +`

                                  This is an important message

                                  ` + +--- + +`This is an important message` + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md new file mode 100644 index 00000000000..c62a07be49c --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-d.md @@ -0,0 +1,38 @@ +--- +id: 637f4e6e72c65bc8e73dfe2a +videoId: gW6cBZLUk6M +title: Working With Text Question D +challengeType: 15 +dashedName: working-with-text-question-d +--- +# --description-- + +The `em` element makes text italic. It also semantically places emphasis on the text, which again may affect things like screen readers. To define an emphasized element you wrap text content in a `` tag. + +To use `em` on its own: + + +Again, like the `strong` element, you will find yourself mostly using the `em` element with other text elements: + + + +# --question-- +## --text-- + +What element should you use to make text italicized to add emphasis? + +## --answers-- + +`This is an italic message` + +--- + +`This is an italic message` + +--- + +`This is an italic message` + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md new file mode 100644 index 00000000000..6de9507ef92 --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-e.md @@ -0,0 +1,65 @@ +--- +id: 637f4e7972c65bc8e73dfe2b +videoId: gW6cBZLUk6M +title: Working With Text Question E +challengeType: 15 +dashedName: working-with-text-question-e +--- +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the `body` element is the parent and the `p` is the child: + +```html + + + + +

                                  Lorem ipsum dolor sit amet.

                                  + + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two `p` elements in the following code are siblings, since they are both children of the `body` tag and are at the same level of nesting as each other: + +```html + + + + +

                                  Lorem ipsum dolor sit amet.

                                  +

                                  Ut enim ad minim veniam.

                                  + + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship do two elements have if they are at the same level of nesting? + +## --answers-- + +The elements are each other's parents. + +--- + +The elements are each other's children. + +--- + +The elements are siblings. + +## --video-solution-- + +3 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md new file mode 100644 index 00000000000..f7d550a413a --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-f.md @@ -0,0 +1,66 @@ +--- +id: 637f4e8072c65bc8e73dfe2c +videoId: gW6cBZLUk6M +title: Working With Text Question F +challengeType: 15 +dashedName: working-with-text-question-f +--- +# --description-- + +You may have noticed that in all the examples in this lesson you indent any elements that are within other elements. This is known as nesting elements. + +When you nest elements within other elements, you create a parent and child relationship between them. The nested elements are the children and the element they are nested within is the parent. + +In the following example, the body element is the parent and the paragraph is the child: + +```html + + + + +

                                  Lorem ipsum dolor sit amet.

                                  + + +``` + +Just as in human relationships, HTML parent elements can have many children. Elements at the same level of nesting are considered to be siblings. + +For example, the two paragraphs in the following code are siblings, since they are both children of the body tag and are at the same level of nesting as each other: + +```html + + + + +

                                  Lorem ipsum dolor sit amet.

                                  +

                                  Ut enim ad minim veniam.

                                  + + +``` + +You use indentation to make the level of nesting clear and readable for yourselves and other developers who will work with your HTML in the future. It is recommended to indent any child elements by two spaces. + +The parent, child, and sibling relationships between elements will become much more important later when you start styling your HTML with CSS and adding behavior with JavaScript. For now, however, it is just important to know the distinction between how elements are related and the terminology used to describe their relationships. + +# --question-- + +## --text-- + +What relationship does an element have with any nested element within it? + +## --answers-- + +The element within the other element is called the parent element. + +--- + +The element within the other element is called the child element. + +--- + +The element within the other element is called the sibling element. + + +## --video-solution-- + +2 diff --git a/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md new file mode 100644 index 00000000000..c85ec0d8e9f --- /dev/null +++ b/curriculum/challenges/english/10-coding-interview-prep/the-odin-project/working-with-text-question-g.md @@ -0,0 +1,48 @@ +--- +id: 637f4e8772c65bc8e73dfe2d +videoId: gW6cBZLUk6M +title: Working With Text Question G +challengeType: 15 +dashedName: working-with-text-question-g +--- +# --description-- + +HTML comments are not visible to the browser; they allow us to comment on your code so that other developers or your future selves can read them and get some context about something that might not be clear in the code. + +Writing an HTML comment is simple: You just enclose the comment with ``tags. For example: + +```html +

                                  View the html to see the hidden comments

                                  + + + +

                                  Some paragraph text

                                  + + +``` + +# --question-- + +## --assignment-- + +To get some practice working with text in HTML, create a plain blog article page which uses different headings, uses paragraphs, and has some text in the paragraphs bolded and italicized. You can use [Lorem Ipsum](https://loremipsum.io) to generate dummy text, in place of real text as you build your sites. + +## --text-- + +How do you create HTML comments? + +## --answers-- + +`/* This is an HTML comment */` + +--- + +`` + +--- + +`<-- This is an HTML comment --!>` + +## --video-solution-- + +2 diff --git a/curriculum/schema/challengeSchema.js b/curriculum/schema/challengeSchema.js index d837e813e2f..f4dffebb713 100644 --- a/curriculum/schema/challengeSchema.js +++ b/curriculum/schema/challengeSchema.js @@ -28,7 +28,7 @@ const schema = Joi.object() challengeOrder: Joi.number(), removeComments: Joi.bool(), certification: Joi.string().regex(slugRE), - challengeType: Joi.number().min(0).max(14).required(), + challengeType: Joi.number().min(0).max(15).required(), checksum: Joi.number(), // __commentCounts is only used to test the comment replacement __commentCounts: Joi.object(), @@ -91,6 +91,7 @@ const schema = Joi.object() crossDomain: Joi.bool() }) ), + assignments: Joi.array().items(Joi.string()), solutions: Joi.array().items(Joi.array().items(fileJoi).min(1)), superBlock: Joi.string().regex(slugWithSlashRE), superOrder: Joi.number(), diff --git a/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap b/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap index 505e3aa4ac5..2988fc15d5b 100644 --- a/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap +++ b/tools/challenge-parser/parser/__snapshots__/index.acceptance.test.js.snap @@ -2,6 +2,7 @@ exports[`challenge parser it should not parse directives we do not use 1`] = ` Object { + "assignments": Array [], "description": "

                                  :root appears, :import appears

                                  the next paragraph should appear

                                  @@ -19,6 +20,7 @@ a container directive exports[`challenge parser it should parse video questions 1`] = ` Object { + "assignments": Array [], "description": "

                                  Paragraph 1

                                  code example
@@ -48,6 +50,7 @@ Object {
 
 exports[`challenge parser should import md from other files 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
@@ -112,6 +115,7 @@ for (let index = 0; index < array.length; index++) {
 
 exports[`challenge parser should not mix other YAML with the frontmatter 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
@@ -176,6 +180,7 @@ Object {
 
 exports[`challenge parser should parse a more realistic md file 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
@@ -365,6 +370,7 @@ assert(
 
 exports[`challenge parser should parse a simple md file 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
@@ -465,6 +471,7 @@ if(let x of xs) {
 
 exports[`challenge parser should parse frontmatter 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
@@ -526,6 +533,7 @@ Object {
 
 exports[`challenge parser should parse gfm strikethrough and frontmatter 1`] = `
 Object {
+  "assignments": Array [],
   "challengeFiles": Array [
     Object {
       "contents": "
diff --git a/tools/challenge-parser/parser/index.js b/tools/challenge-parser/parser/index.js
index c2c6fd82447..1645fc253c6 100644
--- a/tools/challenge-parser/parser/index.js
+++ b/tools/challenge-parser/parser/index.js
@@ -9,6 +9,7 @@ const addSolution = require('./plugins/add-solution');
 const addTests = require('./plugins/add-tests');
 const addText = require('./plugins/add-text');
 const addVideoQuestion = require('./plugins/add-video-question');
+const addAssignment = require('./plugins/add-assignment');
 const replaceImports = require('./plugins/replace-imports');
 const restoreDirectives = require('./plugins/restore-directives');
 const tableAndStrikeThrough = require('./plugins/table-and-strikethrough');
@@ -44,6 +45,7 @@ const processor = unified()
   // converted back to text before they're added to the challenge object.
   .use(restoreDirectives)
   .use(addVideoQuestion)
+  .use(addAssignment)
   .use(addTests)
   .use(addText, ['description', 'instructions', 'notes']);
 
diff --git a/tools/challenge-parser/parser/plugins/add-assignment.js b/tools/challenge-parser/parser/plugins/add-assignment.js
new file mode 100644
index 00000000000..1f2ef25ff33
--- /dev/null
+++ b/tools/challenge-parser/parser/plugins/add-assignment.js
@@ -0,0 +1,24 @@
+const getAllBetween = require('./utils/between-headings');
+
+const mdastToHtml = require('./utils/mdast-to-html');
+const { splitOnThematicBreak } = require('./utils/split-on-thematic-break');
+
+function plugin() {
+  return transformer;
+
+  function transformer(tree, file) {
+    const assigmentNodes = getAllBetween(tree, '--assignment--');
+
+    const assignment = getAssignments(assigmentNodes).filter(a => a != '');
+
+    file.data.assignments = assignment;
+  }
+
+  function getAssignments(assignmentNodes) {
+    const assignmentGroups = splitOnThematicBreak(assignmentNodes);
+
+    return assignmentGroups.map(assignment => mdastToHtml(assignment));
+  }
+}
+
+module.exports = plugin;
diff --git a/tools/challenge-parser/parser/plugins/add-video-question.js b/tools/challenge-parser/parser/plugins/add-video-question.js
index edab5413fe1..0c7247e7d05 100644
--- a/tools/challenge-parser/parser/plugins/add-video-question.js
+++ b/tools/challenge-parser/parser/plugins/add-video-question.js
@@ -6,11 +6,11 @@ const { splitOnThematicBreak } = require('./utils/split-on-thematic-break');
 
 function plugin() {
   return transformer;
-
   function transformer(tree, file) {
     const questionNodes = getAllBetween(tree, '--question--');
     if (questionNodes.length > 0) {
       const questionTree = root(questionNodes);
+
       const textNodes = getAllBetween(questionTree, '--text--');
       const answersNodes = getAllBetween(questionTree, '--answers--');
       const solutionNodes = getAllBetween(questionTree, '--video-solution--');
@@ -31,7 +31,6 @@ function getQuestion(textNodes, answersNodes, solutionNodes) {
   if (!answers) throw Error('answers are missing from question');
   if (!solution) throw Error('solution is missing from question');
 
-  // console.log({ text, answers, solution });
   return { text, answers, solution };
 }